【报Bug】含跨域资源的canvas调用uni.canvasToTempFilePath在h5环境报错

分类：uni-app

bug反馈

产品分类： uniapp/H5

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win 10

浏览器平台：手机系统浏览器

浏览器版本： UA:Mozilla/5.0（iPhone; CPU iPhone OS 13_6_1 like Max OS X）AppleWebKit/605.1.15（JHTML,linke Gecko）Version/13.1.1 Mobile/15E148 Safari/604.1

项目创建方式： CLI

CLI版本号： 4.4.6

示例代码：

模板：

<canvas  
            canvas-id="canvasid"  
            :style="{width:100%, height: 100%}"  
        />

js:

let ctx = uni.createCanvasContext('canvasid', this);  
ctx.drawImage(imgPath, 0, 0, 500, 500, 0, 0);  

 setTimeout(() => {  
         uni.canvasToTempFilePath({  
                 canvasId: 'canvasid',  
                 success: (res) => {  
                         console.log('res.tempFilePath', res.tempFilePath)  
                   },  
                  fail: (err) => {  
                         console.log('uni.canvasToTempFilePath海报生成错误', err);  
                   }  
        }, this);  
}, 3000);

操作步骤：

设置imgPath为非跨域图片资源，成功输出canvas的base64
设置imgPath为跨域图片资源（服务端已设置白名单），IOS报错“canvasToTempFilePath:fail SecurityError:The operation is in secure”，安卓不报错
修改node_modules/@dcloudio目录下的代码，在所有为img标签设置src属性的代码前一行都添加了类似以下语句（因为不确定真正是哪一处生效，干脆全部设置）：
```
image.setAttribute('crossOrigin', 'anonymous')
```
修改之后运行，ios和安卓都不报错。

预期结果：

h5在ios设备运行正常返回canvas的base64

实际结果：

h5在ios设备运行未返回canvas的base64，报错：
“canvasToTempFilePath:fail SecurityError:The operation is in secure”

bug描述：

含跨域资源的canvas调用uni.canvasToTempFilePath在h5环境报错:

canvasToTempFilePath:fail SecurityError:The operation is in secure

为了验证这个问题，我尝试直接修改node_modules/@dcloudio目录下的代码，在所有为img标签设置src属性的代码前一行都添加了类似以下语句（因为不确定真正是哪一处生效，干脆全部设置）：

image.setAttribute('crossOrigin', 'anonymous')

运行之后ios设备运行H5就正常了。

2021-02-26 11:16 负责人:无分享

1 个回复

reverspring - 没什么好说的

请问修改的是那部分的代码

要回复问题请先登录或注册

【报Bug】含跨域资源的canvas调用uni.canvasToTempFilePath在h5环境报错

预期结果：

h5在ios设备运行正常返回canvas的base64

实际结果：

h5在ios设备运行未返回canvas的base64，报错：
“canvasToTempFilePath:fail SecurityError:The operation is in secure”

bug描述：

1 个回复

公告

相关问题

【报Bug】含跨域资源的canvas调用uni.canvasToTempFilePath在h5环境报错

预期结果： h5在ios设备运行正常返回canvas的base64

实际结果： h5在ios设备运行未返回canvas的base64，报错： “canvasToTempFilePath:fail SecurityError:The operation is in secure”

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

预期结果：

h5在ios设备运行正常返回canvas的base64

实际结果：

h5在ios设备运行未返回canvas的base64，报错：
“canvasToTempFilePath:fail SecurityError:The operation is in secure”