destWidth 生成图片的宽度,数值越大图片越清楚。
destHeight 生成图片的高度,数值越大图片越清楚。
数值不是越大越好,数值越大,生成的图片越大,图片加载的也就越慢
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: w,
height: h,
destWidth: w,
destHeight: h,
canvasId: 'shareCanvas',
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({
title: '图片已经生成',
icon: 'loading',
duration: 1000
})
}
})
上传图片在项目中属于一个常见场景。在小程序中同样遇到了这样的需求。如何去解决呢?
利用wx.chooseImage(),wx.uploadFile()两个接口即可完成小程序的批量上传图片。
wx.chooseImage()
主要参数:
count:控制选择图片张数至多9张;
sizeType: 选择图片尺寸(压缩:compressed or 原图:original);
sourceType: 图片来源(相册:album or 拍照:camera)
wx.uploadFile()
主要参数:
url: 图片上传接口;
filePath: 上传资源路径(string)
name: 文件对应的 key,(与后台接口约定的key)
util.js
index.js
[图片上传失败...(image-353ab7-1553483695861)]
[图片上传失败...(image-a789e3-1553483695861)]
a, 批量封装函数中对上传文件大小的监控
b, 加上uploadTask可以实现上传进度的监控
...
这一报错在微信开发者论坛中被多次提及,最多被提到的就是这一方法。
wx.draw()是一个异步执行的api,canvasToTempFilePath需要在其回调中执行。延迟 200毫秒 一般就可以解决这个问题。
当这个api只执行一次时延迟200毫秒其实无所谓,但是多次调用时,这个延迟也浪费了不少时间。对于性能强大的手机,这也是一种浪费,一般只有性能较弱的安卓机才会出现这个问题。所以我更建议大家使用下面一个。
canvasToTempFilePath本身也是异步api,有错误回调可以使用。
我的项目中需要绘制的图片大小为180*180px,耗时基本在50-100ms左右。报错一次以后canvas基本也就准备好了,一般不会错第三遍。
题外话:这一个api的耗时与画布大小密切相关,也建议大家绘制图片时一定要控制好canvas画布大小。比方说,绘制200*200的图片,canvas要大小一致。尤其是图片数量比较大时,在模拟器上体现不出差别,但是手机上影响很大。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)