博客
关于我
canvas组件绘制的内容导出生成图片保存到相册后打开异常
阅读量:458 次
发布时间:2019-03-06

本文共 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/

你可能感兴趣的文章
MySQL 日期时间类型的选择
查看>>
Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度)
查看>>
MySQL 是如何加锁的?
查看>>
MySQL 是怎样运行的 - InnoDB数据页结构
查看>>
mysql 更新子表_mysql 在update中实现子查询的方式
查看>>
MySQL 有什么优点?
查看>>
mysql 权限整理记录
查看>>
mysql 权限登录问题:ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using password: YES)
查看>>
MYSQL 查看最大连接数和修改最大连接数
查看>>
MySQL 查看有哪些表
查看>>
mysql 查看锁_阿里/美团/字节面试官必问的Mysql锁机制,你真的明白吗
查看>>
MySql 查询以逗号分隔的字符串的方法(正则)
查看>>
MySQL 查询优化:提速查询效率的13大秘籍(避免使用SELECT 、分页查询的优化、合理使用连接、子查询的优化)(上)
查看>>
mysql 查询,正数降序排序,负数升序排序
查看>>
MySQL 树形结构 根据指定节点 获取其下属的所有子节点(包含路径上的枝干节点和叶子节点)...
查看>>
mysql 死锁 Deadlock found when trying to get lock; try restarting transaction
查看>>
mysql 死锁(先delete 后insert)日志分析
查看>>
MySQL 死锁了,怎么办?
查看>>
MySQL 深度分页性能急剧下降,该如何优化?
查看>>
MySQL 深度分页性能急剧下降,该如何优化?
查看>>