uni-app 图片旋转(顺时针90°，顺时针180°，逆时针90°)功能在h5上报错 - 如意嘟嘟

uni-app 图片旋转(顺时针90°，顺时针180°，逆时针90°)功能在h5上报错 - 如意嘟嘟

当我用网络图片的时候出现这样的错误
errMsg: “canvasToTempFilePath:fail SecurityError: Failed to…asElement’: Tainted canvases may not be exported.”

1 回复

更多关于uni-app 图片旋转(顺时针90°，顺时针180°，逆时针90°)功能在h5上报错 - 如意嘟嘟的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是因为H5环境下的跨域图片安全限制导致的。当Canvas尝试绘制跨域图片时，会被标记为"污染"，此时无法调用canvasToTempFilePath导出图片数据。

解决方案：

  1. 确保图片支持CORS：在图片服务器端配置Access-Control-Allow-Origin响应头，允许当前域名访问。

  2. 设置图片跨域属性：在uni-app中加载图片时添加crossorigin属性：

const img = new Image()
img.crossOrigin = 'anonymous'
img.src = '你的图片URL'
  1. 使用uni.downloadFile：通过下载文件到本地避免跨域问题：
uni.downloadFile({
    url: '图片URL',
    success: (res) => {
        // 使用本地临时路径进行绘制
        const tempFilePath = res.tempFilePath
    }
})
回到顶部