将Canvas元素下载到图像 [英] Downloading Canvas element to an image

问题描述

保存画布对象有什么不同的方法？

What are the different ways to save a canvas object?

在我的研究中，我发现了两种方法：

In my research, I've found two approaches:

var data = canvas.toDataURL();
var prev = window.location.href;
window.location.href = data.replace("image/png", "image/octet-stream");
window.location.href = prev;

另一种方法是拍摄快照。

Another way is to take a snapshot.

还有其他方法吗？

是否可以自定义下载文件名？

Is it possible to customize the download filename?

推荐答案

保存的一种方式是导出为图像...您已经找到了这个解决方案，它是我认为最好的一个方法;）

The one way to save is exporting as an image... You already found this solution, and it's the best one i think ;)

    var canvas = document.getElementById("mycanvas");
    var img    = canvas.toDataURL("image/png");
    document.write('<img src="'+img+'"/>');

您可以使用不同的图像类型。在此功能中更改mimetype：

You can use different image types. Change the mimetype in this function:

    canvas.toDataURL("image/jpeg");

另一种保存画布数据（以PDF格式）的方式是使用 wkhtmltopdf图书馆

An other way to save canvas data (into a PDF) is using the wkhtmltopdf Library

干杯。弗兰克

frankneff.ch / @frankneff

frankneff.ch / @frankneff

这篇关于将Canvas元素下载到图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！