- 使用chooseImage方式生成canvas然后导出
const qrCanvas = uni.createCanvasContext('test') uni.chooseImage({ success: (res) => { console.log(res.tempFilePaths[0]) qrCanvas.drawImage(res.tempFilePaths[0], 0, 0, 500, 500) qrCanvas.setTextAlign('center') qrCanvas.setFontSize(uni.upx2px(32)) qrCanvas.fillText(this.title, uni.upx2px(375), uni.upx2px(600)) qrCanvas.draw(); } }) - 使用本地静态资源图片生成canvas然后导出
const qrCanvas = uni.createCanvasContext('test') qrCanvas.drawImage('/static/logo.png', 0, 0, 500, 500) qrCanvas.setTextAlign('center') qrCanvas.setFontSize(uni.upx2px(32)) qrCanvas.fillText(this.title, uni.upx2px(375), uni.upx2px(600)) qrCanvas.draw();uni.canvasToTempFilePath({ canvasId: 'test', success: res => { uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success() { uni.showToast({ title: '已保存到系统相册', icon: 'none' }); }, fail(e) { console.log(e) uni.showToast({ title: e, icon: 'none' }); } }); }, fail: e => { console.log(e) uni.showToast({ title: '图片导出失败', icon: 'none' }); } });
m***@163.com
- 发布：2020-12-09 14:11
- 更新：2020-12-15 09:28
- 阅读：581
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Win7 64位
HBuilderX类型： 正式
HBuilderX版本号： 2.9.8
手机系统： Android
手机系统版本号： Android 10
手机厂商： 华为
手机机型： 华为 荣耀V30 PRO
页面类型： vue
打包方式： 离线
项目创建方式： HBuilderX
示例代码：
操作步骤：
- 从本地相册中选取一张图片/直接从static文件夹中取一张图片
- 使用ctx.drawImage()绘制到canvas上
- 使用uni.canvasToTempFilePath()方法将canvas生成本地文件路径，并调用uni.saveImageToPhotosAlbum()保存至本地相册
- 从本地相册中选取一张图片/直接从static文件夹中取一张图片
- 使用ctx.drawImage()绘制到canvas上
- 使用uni.canvasToTempFilePath()方法将canvas生成本地文件路径，并调用uni.saveImageToPhotosAlbum()保存至本地相册
预期结果：
提示保存成功
提示保存成功
实际结果：
在canvasToTempFilePath()方法的fail回调用报错
canvasToTempFilePath：fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement' : Tainted canvases may not be exported
在canvasToTempFilePath()方法的fail回调用报错
canvasToTempFilePath：fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement' : Tainted canvases may not be exported
bug描述：
使用canvasToTempFilePath()方法将canvas导出图片时候报错，图片中无远程资源，均为本地资源。如果去掉图片则可以导出
