如何自动下载从画布元素中获取的图像？答案

【问题标题】：How to automatically download a image taken from a canvas element?如何自动下载从画布元素中获取的图像？
【发布时间】：2018-06-21 16:52:54
【问题描述】：

以下代码获取一张图片，将其复制到画布中（以便对其进行修改），然后再次将其转换为图片：

  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.......

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

【问题讨论】：

在此处查看答案：stackoverflow.com/questions/10673122/… 有效吗？

标签： javascript html canvas

【解决方案1】：

您可以使用canvas.toBlob() 获取文件的Blob，创建一个新的Blob，将原始Blob 设置为可迭代，将type 设置为"application/octet-stream"，URL.createObjectURL() 创建一个@文件对象的987654332@。

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

【讨论】：

另见Base64 PDF in new tab shows Blank Page before Refresh, How to download a file without using <a> element with download attribute or a server?
下载的文件是这样命名的：7c725e7b-44eb-4dff-9620-6c32566ad080。很奇怪。
@alex 这是Blob URL UUID。用户可以在接受文件下载之前或之后随时更改文件名。
你能给我一个如何更改名称的例子吗？
您可以使用带有download 属性的<a> 元素向用户建议文件名。将<a>元素的href设置为Blob URL，调用.click()，见How to build PDF file from binary string returned from a web-service using javascript

【解决方案2】：

下面是示例代码..！

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
<button  onclick="downloadImage()">Save image</button>

<script  src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

    function downloadImage(){
        var canvas = document.getElementById("myCanvas");
    	canvas.toBlob(function(blob) {
    		saveAs(blob, "canvas_images.png");
    	});
    }
</script>
</body>
</html>

【讨论】：

如何使用 import/ES6 语法导入 saveAs？
我以前没有使用过 import/ES6 语法，但这个问题会对你有所帮助，stackoverflow.com/questions/21997057/how-to-use-filesaver-js....！
或下载FileSaver.min.js并添加此代码import * as myModule from '/FileSaver.min.js';