HTML5画布到PNG文件 [英] HTML5 Canvas to PNG File

问题描述

我正在尝试将HTML5画布转换为图像。这是我到目前为止：

  var tmp_canvas = document.getElementById（'canvas'）; 
 var dataURL = tmp_canvas.toDataURL（image / png）; 
 $（'＃thumbnail_list'）。append（$（'< img />'，{src：dataURL}）。addClass（'image'））; 
  

但问题是我得到这段代码：

'pre> < IMG SRC =数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAZAAAAEsCAYAAADtt + XCAAAgAElEQVR4nNS6Z1xVaZbvv / C + CVOZc6mYEMlJMZRizgljGRARs6AgOSMGQATBSM5Zy​​TkoOQkSzJWrp3t6etLt6Z7pmf / C ++ L7f3EOiBZW2dM9dz73xfdzztl7n3Oe / Txrrd9a69mCTC4gkwvIZAKSTECUBARRQBA + JII + 46F ..... ..class =image>


我想要一个用户可以下载的普通图像路径！

任何帮助？

解决方案

IE10 +根本不支持下面的方法，其他人已经完成了这项工作并实现了跨浏览器解决方案
这个就是其中之一。

首先，将生成的数据网址添加到< a> 标记的 href 属性。
但是在某些浏览器中，这不会触发下降oad。相反，它会在新页面中打开链接的图像。

下载base64图像对话框：

 < img src =data：image / png; base64，iVBORw0KGgoAAAANSUhEUg ....class =image/> 
  

基于上述示例，将数据URL的MIME类型转换为：

 < a href =data：application / octet-stream; base64，iVBORw0KGgoAAAANSUhEUg ....>下载< / a> 
  

通过告诉浏览器数据是 application / octet-stream ，它会要求您将其保存在硬盘上。

---

指定文件名：

由于 Adi 在下面的评论中说，没有标准使用此方法定义文件名的方法。但是，有两种方法可能适用于某些浏览器。

A）Google Crome引入的下载属性

 < a download =image.pnghref =...> 
  

B）在数据URL中定义HTTP标头

headers = Content-Disposition：附件; filename = image.png

 < a href =data：application / octet-stream;标题=内容处置％3A％20attachment％3B％20filename = image.png; BASE64，iVBORw0KGgoAAAA> 
  

至少在一些旧版本的Opera中起作用。
这里是对此的一些讨论。

纵观主要浏览器的Bug / Feature-Tracking系统，显示定义文件名是社区的一大愿望。也许我们会在不久的将来看到一个跨浏览器兼容的解决方案！ ;）

---

保存RAM和CPU资源：

如果您不想膨胀访客浏览器的内存，也可以动态生成数据网址：

 < a id =dldownload =Canvas.png>下载Canvas< / a> 
  

 函数dlCanvas（） {
 var dt = canvas.toDataURL（'image / png'）; 
 this.href = dt; 
}; 
 dl.addEventListener（'click'，dlCanvas，false）; 
  

这样，您的画布仍然可以通过浏览器显示为图像文件。
如果你想增加打开下载对话框的概率，你应该扩展上面的函数，以便它可以替换上面的代码：

 函数dlCanvas（）{
 var dt = canvas.toDataURL（'image / png'）; 
 this.href = dt.replace（/ ^ data：image\ / [^;] /，'data：application / octet-stream'）; 
}; 
 dl.addEventListener（'click'，dlCanvas，false）; 
  

最后，添加HTTP标头以确保大多数浏览器为您提供有效的文件名！ ;）

---

完整示例：

  var canvas = document.getElementById（cnv）; var ctx = canvas.getContext（2d）; / * FILL CANVAS WITH IMAGE DATA * / function r（ctx，x，y，w，h ，c）{ctx.beginPath（）; ctx.rect（x，y，w，h）; ctx.strokeStyle = c; （ctx，4，4，16，16，red）; r（ctx，8,8,16） ，16，green）; r（ctx，12,12,16,16，blue）; / * REGISTER DOWNLOAD HANDLER * // *仅在用户点击时将画布转换为数据URL。这样可以节省RAM和CPU资源，以防不需要此功能。 * / function dlCanvas（）{var dt = canvas.toDataURL（'image / png'）; / *更改MIME类型以诱使浏览器下载文件而不是显示它* / dt = dt.replace（/ ^ data：image \ / [^;] * /，'data：application / octet-stream'） ; / *除了< a>的下载属性之外，您还可以定义HTTP风格的标头* / dt = dt.replace（/ ^ data：application \ / octet-stream /，'data：application / octet -stream;头=内容处置％3A％20attachment％3B％20filename = Canvas.png'）; this.href = dt;}; document.getElementById（dl）。addEventListener（'click'，dlCanvas，false）;  

 < canvas id =cnvwidth =32height =32>< / canvas>< a id =dldownload =Canvas.pnghref =＃>下载Canvas< / a>  

I am trying to convert an HTML5 canvas to an image. This is what I got so far:

var tmp_canvas = document.getElementById('canvas');
var dataURL = tmp_canvas.toDataURL("image/png");
$('#thumbnail_list').append($('<img/>', { src : dataURL }).addClass('image'));

but the problem is that I get this code:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAEsCAYAAADtt+XCAAAgAElEQVR4nNS6Z1xVaZbvv/c+CVOZc6mYEMlJMZRizgljGRARs6AgOSMGQATBSM5ZyTkoOQkSzJWrp3t6etLt6Z7pmf/c++L7f3EOiBZW2dM9dz73xfdzztl7n3Oe/Txrrd9a69mCTC4gkwvIZAKSTECUBARRQBA+jii+46f.......class="image">

I want a normal image path that the user can download!

Any help?

解决方案

Info: IE10+ doesn't support below method at all. Other people already did the work and implemented cross browser solutions. This is one of them.

First, add the generated data URL to the href attribute of an <a> tag. However on some browsers, this alone will not trigger a download. Instead it will open the linked image in a new page.

Download dialog for a base64 image:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...." class="image" />

Based on above example, convert the MIME type of the data URL to this:

<a href="data:application/octet-stream;base64,iVBORw0KGgoAAAANSUhEUg....">Download</a>

By telling the browser that the data are application/octet-stream, it will ask you to save it on your hard-disk.

---

Specifying a filename:

As Adi said in the comments below, there is no standard way to define a filename using this method. But, there are two approaches which might work in some browsers.

A) The download attribute introduced by Google Crome

<a download="image.png" href="...">

B) Defining HTTP headers within the data URL
headers=Content-Disposition: attachment; filename=image.png

<a href="data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=image.png;base64,iVBORw0KGgoAAAA">

This worked at least in some older versions of Opera. Here is some discussion about this.

Looking into the Bug/Feature-Tracking systems of the major browsers shows that defining a filename is quite a big wish of the community. Maybe we will see a cross-browser compatible solution in near future! ;)

---

Save RAM and CPU ressources:

If you don't want to bloat the RAM of your visitor's browser, you can also generate the data URL dynamically:

<a id="dl" download="Canvas.png">Download Canvas</a>

function dlCanvas() {
    var dt = canvas.toDataURL('image/png');
    this.href = dt;
};
dl.addEventListener('click', dlCanvas, false);

This way, your canvas may still be shown as an image file by your browser. If you want to increase the probability to open a download dialog, you should extend the function above, so that it does the replacement as shown above:

function dlCanvas() {
    var dt = canvas.toDataURL('image/png');
    this.href = dt.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
};
dl.addEventListener('click', dlCanvas, false);

Last, add the HTTP header to make extra sure that most browsers offer a valid filename to you! ;)

---

FULL EXAMPLE:

var canvas = document.getElementById("cnv");
var ctx = canvas.getContext("2d");

/* FILL CANVAS WITH IMAGE DATA */
function r(ctx, x, y, w, h, c) {
  ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.strokeStyle = c;
  ctx.stroke();
}
r(ctx, 0, 0, 32, 32, "black");
r(ctx, 4, 4, 16, 16, "red");
r(ctx, 8, 8, 16, 16, "green");
r(ctx, 12, 12, 16, 16, "blue");

/* REGISTER DOWNLOAD HANDLER */
/* Only convert the canvas to Data URL when the user clicks. 
   This saves RAM and CPU ressources in case this feature is not required. */
function dlCanvas() {
  var dt = canvas.toDataURL('image/png');
  /* Change MIME type to trick the browser to downlaod the file instead of displaying it */
  dt = dt.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');

  /* In addition to <a>'s "download" attribute, you can define HTTP-style headers */
  dt = dt.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=Canvas.png');

  this.href = dt;
};
document.getElementById("dl").addEventListener('click', dlCanvas, false);

<canvas id="cnv" width="32" height="32"></canvas>
<a id="dl" download="Canvas.png" href="#">Download Canvas</a>

这篇关于HTML5画布到PNG文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！