本文共 1323 字,大约阅读时间需要 4 分钟。
在快应用开发过程中,某些用户在使用canvas组件绘制内容并将其导出保存到相册时,可能会遇到以下异常现象:
canvas组件绘制的内容,保存到相册后却无法看到这一部分。该问题的根源在于canvas组件的上下文对象ctx获取方式。华为快应用引擎在getContext方法的调用中,每次都会创建新的ctx对象。如果某次调用返回的是空ctx对象,会导致后续绘图操作无法正常执行,最终导出的图片也只显示背景图。
具体问题出现在save()方法中,canvas组件的ctx可能为null,导致绘制失败。以下是问题代码示例:
save() { var test = this.$element("canvas"); test.toTempFilePath({ // ...其他配置 });} 为了确保canvas绘制内容能够正确保存到相册,建议采取以下解决方案:
ctx变量:将canvas组件的上下文对象ctx定义为全局变量,以便在多次调用getContext方法时,能够确保获取到非空的ctx对象。ctx进行绘制操作之前,先进行非空判断。如果ctx为空,则手动初始化绘制内容。onload事件中使用非空的ctx进行绘制操作,确保图片加载完成后能够正确渲染在canvas上。改进后的代码示例如下:
var ctx;pic() { if (!ctx) { var test = this.$element("canvas"); 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("图片加载失败"); };} canvas组件开发文档:https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-component-canvascanvas API 文档:https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-api-canvas转载地址:http://qozbz.baihongyu.com/