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

问题描述

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

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

  var data = canvas.toDataURL（）; 
 var prev = window.location.href; 
 window.location.href = data.replace（image / png，image / octet-stream）; 
 window.location.href = prev; 
  

另一种方式是拍摄快照。

是否有其他方法可以自定义下载文件名？

解决方案

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

  var canvas = document.getElementById（mycanvas）; 
 var img = canvas.toDataURL（image / png）; 
 document.write（'< img src ='+ img +'/>'）; 
  

您可以使用不同的图像类型。更改此函数中的mimetype：

  canvas.toDataURL（image / jpeg）; 
  

另一种将画布数据保存为PDF的方法是使用 wkhtmltopdf图书馆

干杯。弗兰克

frankneff.ch / @frankneff

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+'"/>');

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

    canvas.toDataURL("image/jpeg");

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

Cheers. Frank

frankneff.ch / @frankneff

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