[图片] 循环中,每次生成的图片都如图所示。
canvas的生命周期和wx.canvasToTempFilePath的使用疑惑我的需求场景是,传入正文和标题,通过canvas2D将其绘制为图片后,调用wx.canvasToTempFilePath接口,获取其临时地址,后续再做展示等使用。 此功能在绘制单一段落时没有问题,我考虑修改为传入一个数组,遍历这个数组,每生成一段文本,就调用wx.canvasToTempFilePath接口将其存为图片,然后清空当前canvas,再绘制第二段文本...最后得到每一段文字对应的图片临时地址。实际测试发现,每次循环生成的图片是一样的,第二次的绘制内容会直接叠加在第一次的内容上,如图所示[图片] 我尝试在清空当前canvas时加入延迟时间,结果生成的图片就都是空白的了,不知道问题出在哪里? 以下为示例代码: js onlyDrawPic() { //用于循环画图 wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }) .exec((res) => { const textCanvas = res[0].node for (let item of list) { //list like [{"title":"标题","content":"正文"}] this.drawPic(item) } }) } drawPic(item) { setTimeout(() => { drawContent(item);//实际绘图,逻辑略 wx.canvasToTempFilePath({ canvas: canvas, success: res => { // 生成的图片临时文件路径 console.log(res.tempFilePath) }, }) //等待canvas转图片延时 }, 1000) //生成成功后,重置画布大小,清空画布 setTimeout(() => { canvas.height = 1 canvas.width = 1 }, 5000); }, wxml
2022-09-09大概半年前问过这个问题,后面因其他事物没继续查了,今天再试发现问题依旧
jssdk图像接口安卓压缩失效问题需求是想借助chooseImage上传图片,最终获取到压缩后图片的base64。 使用方式如下,前端调用chooseImage 拍照/相册选图上传,sizeType选择compressed压缩,使用uploadImage将图片上传至微信端服务器,再使用download将图片下载至本地,再使用getLocalImgData将获取下载图片的Base64字符串,取Base64串送至应用后台做处理。 出现的问题:ios从本地、相机拍照上传均正常; 安卓端,从相机拍照上传图片,按流程走完,获取到的Base64是一个相对较小的串,通过手机相册和后台日志看,相册中的图片大概在300多K,返回的Base64 (getLocalImageData的localData字段)400-500K;如果使用本地相册上传图片(4.09M),无论sizeType选择compressed或original,手机相册都无法看到下载后的图片,并且getLocalImageData返回的base64的长度一样,均为3604265,感觉是未将上传的图片进行压缩就返回了。 响应代码如下: let u = navigator.userAgent if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { this.mobileType = 'Android' } else if (u.indexOf('iPhone') > -1) { this.mobileType = 'iPhone' } const _this = this wx.chooseImage({ count: 1, // 默认9 sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机,默认二者都有 fail: function () { //todo sth }, success: function (res) { var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 //upload img wx.uploadImage({ localId: localIds[0].toString(), // 需要上传的图片的本地ID,由chooseImage接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { var serverId = res.serverId; // 返回图片的服务器端ID //downloadImg wx.downloadImage({ serverId: serverId, // 需要下载的图片的服务器端ID,由uploadImage接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { var localId = res.localId; // 返回图片下载后的本地ID wx.getLocalImgData({ localId: localId, success: function (res) { let localData = res.localData //页面图像预览 if (_this.mobileType === 'Android') { _this.pic0 = localIds[0] } else { _this.pic0 = localData } localData = localData.replace("data:image/jpg;base64,", "") localData = localData.replace("data:image/jpeg;base64,", "") localData = localData.replace("data:image/jgp;base64,", "") _this.uploadPic0 = localData //传递至服务端的图片数据 } }) } }); } }); } });
2021-01-13