JS上传图片转JPEG格式dataURL报画布污染错误的替代方案

Canvas同源安全策略规定：只要画布上绘制了未获得CORS跨域许可的非同源资源，画布就会被标记为污染状态，此时调用toDataURL()、toBlob()、getImageData()这类导出像素数据的API都会直接抛出错误，本质是为了防止未授权的跨域数据泄露。

针对本地用户上传图片转Data URL的场景，无需处理复杂的跨域逻辑，有更简单可靠的实现方式：

方案1：直接读取本地文件生成Data URL（推荐） #

不需要渲染Image元素、不需要调用Canvas，直接通过FileReader读取用户上传的File对象即可拿到目标Data URL，完全不会触发安全策略限制，是性能最好、代码量最少的方案。
示例代码：

<!-- 文件上传控件 -->
<input type="file" id="imgUpload" accept="image/*">

const uploadInput = document.getElementById('imgUpload')
uploadInput.addEventListener('change', e => {
  const file = e.target.files[0]
  if (!file) return

  const reader = new FileReader()
  reader.onload = () => {
    // reader.result 就是完整的Data URL，格式与上传文件本身格式匹配
    const originalDataUrl = reader.result
    console.log(originalDataUrl)
  }
  // 指定以Data URL格式读取文件
  reader.readAsDataURL(file)
})

方案2：需要统一输出JPEG格式时的Canvas实现 #

如果你需要把所有上传图片（比如PNG、WebP这类带透明通道的格式）统一转成JPEG格式的Data URL，只要用本地生成的Blob地址作为Image源，就不会触发画布污染：

// 接上传回调拿到file对象后的逻辑
const img = new Image()
img.onload = () => {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  // 画布尺寸与原图保持一致
  canvas.width = img.width
  canvas.height = img.height
  // JPEG不支持透明通道，先铺白底避免透明区域转码后变黑
  ctx.fillStyle = '#ffffff'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  // 绘制图片到画布
  ctx.drawImage(img, 0, 0)
  // 导出JPEG格式Data URL，第二个参数为转码画质，取值范围0-1
  const jpegDataUrl = canvas.toDataURL('image/jpeg', 0.9)
  console.log(jpegDataUrl)
  // 释放临时Blob地址，避免内存泄漏
  URL.revokeObjectURL(img.src)
}
// 生成本地临时Blob地址作为图片源，属于当前域下的资源，不会触发跨域限制
img.src = URL.createObjectURL(file)

之前触发画布污染的常见原因 #

• 给Image传入的src不是本地生成的Blob地址，而是存在跨域的远程图片地址，且图片服务端没有配置Access-Control-Allow-Origin响应头
• crossOrigin属性设置时机错误，必须在给img.src赋值前设置img.crossOrigin = 'anonymous'才会生效，赋值之后再设置无效
• 本地调试时用file://协议打开页面，部分浏览器会将本地文件识别为跨域资源，建议用本地静态服务启动页面调试

内容的提问来源于stack exchange，提问作者allen