如何自动下载从画布元素中获取的图像？
Posted
技术标签:
【中文标题】如何自动下载从画布元素中获取的图像？【英文标题】：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.......
这样做的正确方法是什么？我需要将图像自动下载到用户的计算机上。
【问题讨论】：
在此处查看答案：***.com/questions/10673122/… 有效吗？ 【参考方案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" 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 语法，但这个问题会对你有所帮助，***.com/questions/21997057/how-to-use-filesaver-js....！
或下载FileSaver.min.js并添加此代码import * as myModule from '/FileSaver.min.js';以上是关于如何自动下载从画布元素中获取的图像？的主要内容，如果未能解决你的问题，请参考以下文章
我可以从画布元素中获取图像并在 img src 标签中使用它吗？