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

我试图创建新的空图像的宽度和高度，并保存为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（200200）

中获得具有给定宽度和高度的透明图像作为下载时的输出。

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

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

现在，您可以将a-link的

url

设置为

href

源。您可以指定mime类型，但如果不指定任何mime类型，它将始终默认为PNG

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

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

---

请注意IE不支持

toBlob（）

，需要一个，或者您可以使用

navigator.msSaveBlob（）

（IE不支持

download

属性，因此在IE中这将一举两得）.

谢谢K3N回答我的问题，但我没有时间去想你的答案

你的回答正是我需要的

以下是我得到的：

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 canvas=document.createElement（“canvas”）；
画布宽度=200；
画布高度=200；
var url=canvas.toDataURL（）；
var a=document.createElement（'a'）；
a、 下载='my.png'；
a、 href=url；
a、 text内容='下载PNG'；
文件.正文.附件（a）