最近在做一个截图功能，发现uni-app分享自定义图片还是有点问题APP端的分享和微信小程序分享还是有点不同的，这里APP测试用的是安卓手机 下面列举下我遇到的问题1.draw函数的回调不执行强制执行函数ctx.draw(false,(()=>{})())2.canvasToTempFilePath生成的图片很模糊 这在微信小程序也是存在的，方案大都是W450-H200变成W
转载
2023-12-25 10:45:35
325阅读
ctx.draw(false,function(){ setTimeout(function(){ wx.canvasToTempFilePath({ x: 0, y: 0, width: 581 * util.pixelRatio, height: 575 * util.pixelRatio, c ...
转载
2021-10-31 11:57:00
1360阅读
2评论
小程序使用canvas报错："canvasToTempFilePath: fail canvas is empty" 为啥呢？ 因为在自定义组件中使用canvas 需要添加this参数 wx.canvasToTempFilePath({ x: 0, y: 0, width: 581 * util.p ...
转载
2021-10-31 12:03:00
4183阅读
2评论
一、图片裁剪 推荐一款轻量级图片裁剪插件 kpsImageCuster：https://ext.dcloud.net.cn/plugin?id=1076。 其原理就是利用 uni.canvasToTempFilePath() 把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。 官方介绍 ...
转载
2021-07-13 16:44:00
1811阅读
uni.canvasToTempFilePath({ x: 0, // 起点坐标 y: 0, wid
转载
2021-08-15 11:51:00
2980阅读
wx.canvasToTempFilePath({ x: 0, y: 0, width: 200, height: 200,//复制 * 750 / wx.getSystemInfoSync().windowWidth,换算成rpx； destWidth: 5...
原创
2022-01-13 13:51:17
1491阅读
createImage: function(){
let imageWidth = this.data.imageWidth,
imageHeight = this.data.imageHeight;
wx.canvasToTempFilePath({ //将canvas生成图片
canvasId: 'gameCanvas',
x: 0,
y: 0,
width
原创
2023-04-23 14:33:48
457阅读
最近有个微信小程序项目，需要将页面转为图片。微信小程序提供的Api是wx.canvasToTempFilePath，这个方法是将画布指定区域的内容导出生成指定大小的图片，但是我们是将页面导出图片，所以可以使用wxml2canvas解决1、安装wxml2canvasnpm init
npm install wxml2canvas --save --productionnpm init 是npm初始化
最近朋友圈里经常有看到这样的头像既然这么火，大家要图又这么难，作为程序员的自己当然要自己动手实现一个。老规矩，先看效果图仔细研究了下，发现实现起来并不难，核心代码只有下面10行。 wx.canvasToTempFilePath({ x: 0, y: 0, width: num, height: ...
原创
2021-08-08 13:35:22
833阅读
最近朋友圈里经常有看到这样的头像既然这么火，大家要图又这么难，作为程序员的自己当然要自己动手实现一个。老规矩，先看效果图仔细研究了下，发现实现起来并不难，核心代码只有下面10行。 wx.canvasToTempFilePath({ x: 0, y: 0, width: num, height: ...
原创
2022-01-27 09:47:43
582阅读
前言：第一次写的时候，思路。1：获取权限>绘制canvas>保存canvas返回路径,canvasToTempFilePath>图片暂存downloadFile>保存图片saveImageToPhotosAlbum但是在开发小程序开发工具中在图片暂存出现问题，因为开发工具内downloadFile正常，到了手机报错，因为只能下载http文件，二手机返回的是“wxfile
转载
2024-07-15 09:39:24
143阅读
微信小程序没有将view,image,text等标签直接生成图片的api。但是有将canvas直接生成图片的api
将canvas标签生成图片的api--------------------- wx.canvasToTempFilePath
view,image,text等标签，都可以在canvas里画出来
下面是canvas开发的文档
本文只介绍用什么元素制作图片
小程序画布操作文档
原创
2021-09-17 16:02:44
1800阅读
下面简单举个微信小程序处理图片的例子，我们首先获取了图片的路径，并使用wx.getImageInfo方法获取了图片信息。然后，我们根据缩放比例计算出新图片的大小，并使用wx.canvasToTempFilePath方法将原始图片缩放到指定大小。一旦新图片生成成功，我们使用wx.saveImageToPhotosAlbum方法将其保存到用户的相册中。// 获取图片路径const image路径 =
原创
2023-07-03 14:03:27
307阅读
前言一款智能水印相机，拍照自动添加时间、地点、经纬度等水印文字，可用于工作考勤、学习打卡、工作取证等，支持自定义内容以及给现有照片添加水印。无需安装，无需注册，即开即用。原理主要是通过canvas给图片上添加上时间水印地点信息。首先通过官方API(chooseLocation)获取到位置信息，然后利用JS获取本地时间，最后绘制到canvas上通过canvasToTempFilePath生成图片。获
转载
2023-10-01 16:34:11
489阅读
前言微信小程序并不支持view直接转绘到画布上，想要实现海报功能必须通过以下4个步骤：通过wx.createCanvasContext创建一个画布在画布上绘制文本、内容、图片在通过wx.canvasToTempFilePath保存到本地路径在通过wx.saveImageToPhotosAlbum保存到相册一、view生成分享图片1.组件的封装项目结构图：!在这里插入图片描述(https://s2.
原创
精选
2022-12-07 23:42:25
357阅读
效果图整体思路：实现图片的缩放和拖动；在图片上方盖上中间镂空的半透明遮罩；根据截取方框区域的图片。截图时，在方框区域将截取的图片绘制出来，然后使用wx.canvasToTempFilePath截取图片。实现过程和遇到的问题：实现缩放和拖动最初是使用touchStart和touhMove，处理触摸事件来实现图片的缩放和拖动，但是这样的实现在小程序上会很卡。后来无意中发现了小程序提供的movable-
电子签名如何解决生成的图片为空白的问题，以及生成透明底签名图片转为白色底一、生成的图片为空白项目有个新需求需要加电子签名，在实现的过程中遇到了许多问题，现用的插件笔画延迟非常严重，好不容易做完之后又得换一个插件；换了之后又发现画完图后产生的图片是空白的，百度之后才知道，生成图片调用的 uni.canvasToTempFilePath 接口必须要在 draw()回调使用 并且需要异步调用，在图片生成
转载
2023-12-17 11:40:24
44阅读
如下图,是我用uni-app开发小程序时出现视图与弹框或下拉框重叠的效果图,在微信开发工具上显示正常,但到了真机上就这样. 解决措施: 在小程序中canvas层级过高,导致z-index也无法让弹窗置于视图之上,根据官网提供的两种方法: 方案一是利用cover-view; 方案二是uni.canvasToTempfilepath()将视图转换为图片,显示隐藏; 针对我的项目来说,方案二可行. 我的
