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

推荐答案

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 设置为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中，这将杀死两只鸟，只有一颗石头.

这篇关于在JavaScript中创建并保存新的png图像并将其保存为文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

来自  https://www.it1352.com/2201355.html