在 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 元素只能加载现有图像。要创建新图像，您必须使用 canvas:

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 设置为 a-link 的 href 来源。您可以指定一个 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的情况下，这将是一石二鸟。

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

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

Creating and saving to file new png image in JavaScript

html

javascript

png

blob

download