在 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) 中获取具有给定宽度和高度的透明图像作为下载输出。

原文由 AESTHETICS 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 设置为 href a-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 的情况下，用一块石头杀死两只鸟）。

原文由 user1693593 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

谢谢 K3N 回复我的问题，但我没有时间仔细考虑你的回答。

您的回答正是我所需要的！

这是我得到的：

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

canvas.width = 200;
canvas.height = 200;

var url = canvas.toDataURL();

var a = document.createElement('a');
a.download = 'my.png';
a.href = url;
a.textContent = 'Download PNG';

document.body.appendChild(a);

原文由 AESTHETICS 发布，翻译遵循 CC BY-SA 3.0 许可协议