canvas组件绘制的内容导出生成图片保存到相册后打开异常

canvas组件绘制的内容导出生成图片保存到相册后打开异常

Android小彩虹2021-08-27 0:37:11190A+A-

问题现象:

  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");
      }
    }
  

欲了解更多详情,请参见:

快应用开发指导文档:developer.huawei.com/consumer/cn…

快应用canvas组件:

developer.huawei.com/consumer/cn…

画布接口:

developer.huawei.com/consumer/cn…


原文链接: developer.huawei.com/consumer/cn… 作者:AppGallery Connect

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们