Javascript 如何自动下载从画布元素拍摄的图像？

下面的代码获取图像，将其复制到画布中（以便可以修改），然后再次将其转换为图像：

  const image = this.markerEditorEl.components.screenshot.getCanvas('perspective').toDataURL()
  var canvas = document.getElementById('test-canvas')
  var context = canvas.getContext('2d')
  var imageObj = new Image()

  imageObj.onload = function () {
    // set values
    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)
    window.location = canvas.toDataURL()
  }
  imageObj.src = image

如您所见，我正在尝试自动下载图像：

window.location=canvas.toDataURL（）

。然而，这不起作用。我得到：

不允许将顶部框架导航到数据URL: 数据：图像/png；base64，iVBORw0KG

---

正确的做法是什么？我需要将图像自动下载到用户的计算机。

您可以使用

canvas.toBlob（）

获取文件的

Blob

，创建一个新的

Blob

，将原始

Blob

设置为iterable，并将

类型设置为
“应用程序/八位元流”
，
URL.createObjectURL（）
创建文件对象的
Blob URL

canvas.toBlob(blob => {
  let file = new Blob([blob], {type:"application/octet-stream"})
  let blobURL = URL.createObjectURL(file)
  window.location.href = blobURL
})

下面是示例代码



您的浏览器不支持画布元素。
保存图像
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.font=“30px Arial”；
ctx.fillText（“Hello World”，10,50）；
函数downloadImage（）{
var canvas=document.getElementById（“myCanvas”）；
canvas.toBlob（函数（blob）{
saveAs（blob，“canvas_images.png”）；
});
}
请参见此处的答案：它有效吗？另请参见，下载的文件的名称如下：
7c725e7b-44eb-4dff-9620-6c32566ad080
。奇怪。@alex就是UUID。用户可以在接受文件下载之前或之后随时更改文件名。您能给我一个如何更改名称的示例吗？您可以使用导入/ES6语法使用
如何导入
saveAs
？我以前从未使用过导入/ES6语法，但这个问题将帮助您。。。。！或者下载
FileSaver.min.js
并从'/FileSaver.min.js'中添加此代码
import*作为myModule