本文共 2353 字,大约阅读时间需要 7 分钟。
转:
canvas组件绘制的内容导出生成图片保存到相册,进入相册,打开该图片看不到绘制的内容,只有黑色的背景图。
下图中绿色背景部分是canvas组件绘制的内容。
保存到相册效果图如下:
华为的快应用引擎会在每次调用getContext方法创建ctx,会返回不同的ctx对象,有的里面会有内容,有的里面会为空,获取的时候是随机获取的,可能会获取到空的ctx,导致保存后的图片没有内容,问题代码如下。
canvas绘制代码:
pic() { var test = this.$element("canvas"); var ctx = test.getContext("2d"); var img = new Image(); img.src = "http://www.huawei.com/Assets/CBG/img/logo.png"; img.onload = function () { console.log("图片加载完成"); ctx.drawImage(img, 10, 10, 300, 300, ); } img.onerror = function () { console.log("图片加载shibai"); } },
保存图片代码:
save() { var test = this.$element("canvas"); test.toTempFilePath({ fileType: "jpg", quality: 1.0, success: (data) => { console.log(`Canvas toTempFilePath success ${data.uri}`) console.log(`Canvas toTempFilePath success ${data.tempFilePath}`) media.saveToPhotosAlbum({ uri: data.uri, success: function (ret) { console.log("save success: "); }, fail: function (data, code) { console.log("handling fail, code=" + code); } }) }, fail: (data) => { console.log('Canvas toTempFilePath data =' + data); }, complete: () => { console.log('Canvas toTempFilePath complete.'); } }) }
解决方法:
把ctx定义为全局变量,对ctx进行非空判断,为空时,初始化保存。优化代码如下:
var ctx; //定义一个全局的 pic() { if (!ctx) { //对空对象进行判断,ctx为空的时候,把“2d”赋给它 var test = this.$element("canvas"); var tt = test.getContext("2d"); ctx = tt; } var img = new Image(); img.src = "http://www.huawei.com/Assets/CBG/img/logo.png"; img.onload = function () { console.log("图片加载完成"); ctx.drawImage(img, 10, 10, 300, 300, ); } img.onerror = function () { console.log("图片加载shibai"); } }
欲了解更多详情,请参见:
快应用开发指导文档:https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper
快应用canvas组件:
https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-component-canvas
画布接口:
https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-api-canvas
原文链接: https://developer.huawei.com/consumer/cn/forum/topic/0201404980467060234?fid=18
作者:AppGallery Connect转:
转载地址:http://qozbz.baihongyu.com/