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

问题描述

我正在尝试将 HTML5 画布转换为图像.这是我目前得到的:

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 = 数据:图像/PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAZAAAAEsCAYAAADtt + XCAAAgAElEQVR4nNS6Z1xVaZbvv/C + CVOZc6mYEMlJMZRizgljGRARs6AgOSMGQATBSM5Zy​​TkoOQkSzJWrp3t6etLt6Z7pmf/C ++ L7f3EOiBZW2dM9dz73xfdzztl7n3Oe/Txrrd9a69mCTC4gkwvIZAKSTECUBARRQBA + JII + 46F .......类=" 图像">

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

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

有什么帮助吗?

推荐答案

信息: IE10+ 根本不支持以下方法.其他人已经完成了这项工作并实施了跨浏览器解决方案.这个就是其中之一.

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.

首先，将生成的数据 URL 添加到 标签的 href 属性.但是在某些浏览器上，仅此一项不会触发下载.相反，它会在新页面中打开链接的图像.

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.

下载 base64 图像的对话框:

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

基于上面的例子，将数据 URL 的 MIME 类型转换为:

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

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

通过告诉浏览器数据是application/octet-stream，它会要求你把它保存在你的硬盘上.

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

---

指定文件名:

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

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) Google Crome 引入的 download 属性

A) The download attribute introduced by Google Crome

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

B) 在数据 URL 中定义 HTTP 标头
headers=Content-Disposition:附件；文件名=图像.png

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">

这至少在一些旧版本的 Opera 中有效.这里是关于这个的一些讨论.

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! ;)

---

节省 RAM 和 CPU 资源:

如果您不想让访问者浏览器的 RAM 膨胀，您还可以动态生成数据 URL:

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);

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

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

---

完整示例:

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屋！