如何自动下载Canvas生成的图片？解决Data URL导航报错问题

你遇到的这个报错是因为现代浏览器出于安全限制，禁止直接通过window.location跳转到data URL来触发下载，这是浏览器的安全策略，避免恶意网站滥用data URL。下面给你两种实用的解决方法，都能实现自动下载Canvas生成的图片：

方法1：通过创建隐藏<a>标签模拟点击（兼容性好） #

这种方法适配绝大多数浏览器，核心思路是生成一个隐藏的下载链接，手动触发点击事件来启动下载。把你代码里的window.location = canvas.toDataURL()替换成下面的逻辑：

imageObj.onload = function () {
 // 你的原有Canvas绘制代码保持不变
 const sourceWidth = cropWidth
 const sourceHeight = cropHeight
 const sourceX = (width / 2) - (sourceWidth / 2)
 const sourceY = (height / 2) - (sourceHeight / 2)
 const destWidth = cropWidth
 const destHeight = cropHeight
 const destX = 0
 const destY = 0
 context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)

 // 新增自动下载逻辑
 const dataURL = canvas.toDataURL('image/png')
 const downloadLink = document.createElement('a')
 downloadLink.href = dataURL
 // 自定义下载后的文件名，可根据需求修改
 downloadLink.download = 'canvas-cropped-image.png'
 // 隐藏链接并临时添加到DOM
 downloadLink.style.display = 'none'
 document.body.appendChild(downloadLink)
 // 触发点击事件启动下载
 downloadLink.click()
 // 下载完成后移除临时链接
 document.body.removeChild(downloadLink)
}

方法2：使用Blob处理（适合大图片场景） #

如果你的Canvas生成的图片尺寸较大，dataURL可能会过长导致性能问题，这时用Blob处理会更高效。同样替换原有下载逻辑即可：

imageObj.onload = function () {
 // 你的原有Canvas绘制代码保持不变
 const sourceWidth = cropWidth
 const sourceHeight = cropHeight
 const sourceX = (width / 2) - (sourceWidth / 2)
 const sourceY = (height / 2) - (sourceHeight / 2)
 const destWidth = cropWidth
 const destHeight = cropHeight
 const destX = 0
 const destY = 0
 context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)

 // 基于Blob的自动下载逻辑
 canvas.toBlob(function(blob) {
   const blobUrl = URL.createObjectURL(blob)
   const downloadLink = document.createElement('a')
   downloadLink.href = blobUrl
   downloadLink.download = 'canvas-cropped-image.png'
   downloadLink.style.display = 'none'
   document.body.appendChild(downloadLink)
   downloadLink.click()
   document.body.removeChild(downloadLink)
   // 释放Blob URL，避免内存泄漏
   URL.revokeObjectURL(blobUrl)
 }, 'image/png')
}

两种方法都能绕过浏览器的安全限制实现自动下载：方法1兼容性更强，适合大多数场景；方法2在处理大体积图片时性能更优，你可以根据自己的需求选择。

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