在 JavaScript 中创建新的 png 图像并保存到文件

Question

我正在尝试创建具有宽度和高度的新空图像并将其另存为 png 到文件。

这就是我得到的：

var myImage = new Image(200, 200);
myImage.src = 'picture.png';


window.URL = window.webkitURL || window.URL;

var contentType = 'image/png';

var pngFile = new Blob([myImage], {type: contentType});

var a = document.createElement('a');
a.download = 'my.png';
a.href = window.URL.createObjectURL(pngFile);
a.textContent = 'Download PNG';

a.dataset.downloadurl = [contentType, a.download, a.href].join(':');

document.body.appendChild(a);

我正在尝试获取具有给定宽度和高度的透明图像var myImage new Image(200, 200)作为下载的输出。

Answer 1

Image 元素只能加载现有图像。要创建新图像，您必须使用画布：

var canvas = document.createElement("canvas");

// set desired size of transparent image
canvas.width = 200;
canvas.height = 200;

// extract as new image (data-uri)
var url = canvas.toDataURL();

现在您可以设置url为hrefa-link 的源。您可以指定 mime 类型，但如果没有任何类型，它将始终默认为 PNG。

您还可以使用以下方法提取为 blob：

// note: this is a asynchronous call
canvas.toBlob(function(blob) {
  var url = (URL || webkitURL).createObjectURL(blob);
  // use url here..
});

只是要注意 IE 不支持toBlob()并且需要一个polyfill，或者你可以使用navigator.msSaveBlob()（IE 都不支持该download属性，所以在 IE 中这会一石二鸟）。