uni.canvasToTempFilePath({
canvasId: 'firstCanvas',
fileType: 'jpg',
success: res => {
console.log(JSON.stringify(res));
this.posterImg = res.tempFilePath;
uni.hideLoading();
},
fail(e) {
uni.showToast({
title: '生成海报失败',
icon: 'none'
});
}
});
客达
- 发布：2020-10-22 14:13
- 更新：2020-10-23 11:07
- 阅读：1521
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 10
HBuilderX类型： 正式
HBuilderX版本号： 2.9.3
手机系统： Android
手机系统版本号： Android 11
手机厂商： 华为
手机机型： p40
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
生成二维码海报
生成二维码海报
预期结果：
生成海报并展示
生成海报并展示
实际结果：
生成失败
生成失败
bug描述：
华为p40手机生成二维码海报失败
2***@qq.com - 开发界的清流，音乐界的憨批
华为p40生成海报调用canvasToTempFilePath报错：
错误信息：getImageData on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data
- 首先没有服务器环境（如：本地的 html网页，操作本地的图片），
就会报"Unable to get image data from canvas because the canvas has been tainted by cross-origin data"错误。
因为本地测试用的图片是文件夹内的，js跨域限制是不能获取非同一域名下的数据的，
而本地的位置是没有域名的，所以浏览器都认为你是跨域，导致报错。 - 为了阻止欺骗，浏览器会追踪 image data。
当把一个和canvas的域不同的图片放到canvas上，这个canvas就成为 “tainted”(被污染的)，浏览器就不让你操作该canvas 的任何像素。
是为了阻止多种类型的XSS/CSRF攻击（两种典型的跨站攻击）。
将选择出来的本地图片路径转换成base64数据流进行canvas渲染，再次使用canvasToTempFilePath就不会有这种问题，
//通过URL参数获取目录对象或文件对象
plus.io.resolveLocalFileSystemURL('文件路径', function(entry) {
// 可通过entry对象操作文件
entry.file(function(file) { //获取文件数据对象
var fileReader = new plus.io.FileReader(); // 文件系统中的读取文件对象，用于获取文件的内容
fileReader.readAsDataURL(file); //以URL编码格式读取文件数据内容
fileReader.onloadend = function(evt) { //读取文件成功完成的回调函数
let base64 = evt.target.result; // 获取base64数据流
}
})
})
客达 (作者)
1.之前都是可以没有报错，用了很久了，就更新了Hbuildx到最新版本，打包更新完之后用户就反馈了这个问题。
2020-10-23 13:17
2***@qq.com
回复 客达: 我昨天刚解决的，不管是什么版本感觉都有问题
2020-10-23 13:38
2***@qq.com
回复 客达: 如果你是h5的话，最常见的h5解决生成海报图片跨域也是将图片转换成base64，然后转换成临时路径进行渲染
2020-10-23 13:41
客达 (作者)
回复 2***@qq.com: 这个是app反馈的问题
2020-10-23 15:30
客达 (作者)
回复 2***@qq.com: h5跨域这边之前解决了，但是也是更新完之后海报都生成不了，一直失败，不知道是什么原因，回退版本后，h5就可以正常生成海报
2020-10-23 15:32
2***@qq.com
回复 客达: 用我提供的方法尝试解决一下，有时候版本问题不是我们能控制的，就需要找其他方式兼容
2020-10-24 13:53
客达 (作者)
回复 2***@qq.com: 好的，谢谢
2020-10-26 09:42