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

还有其他方法可以做到这一点吗?

Are there other ways to do this?

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

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 Library

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

干杯.弗兰克

frankneff.ch/@frankneff

frankneff.ch / @frankneff

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