Erstellen und Speichern von neuen PNG-Bildern in JavaScript

Question

Ich versuche ein neues leeres Bild mit Breite und Höhe zu erstellen und es als PNG in Datei zu speichern.

Dies ist, was ich habe:

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

ich mit bestimmten Breite und Höhe in var myImage new Image(200, 200) als die Ausgabe auf der Download-transparentes Bild zu bekommen versuchen.

Answer 1

Das Bildelement kann nur ein vorhandenes Bild laden. Um ein neues Bild zu erstellen müssen Sie Leinwand verwenden:

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

Jetzt können Sie url als href Quelle für die a-Verbindung eingestellt. Sie können einen Mime-Typ angeben, aber ohne es wird immer standardmäßig auf PNG.

Sie können auch als Blob-Extrakt:

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

bewusst sein, einfach an, dass der IE nicht toBlob() unterstützt und wird ein polyfill benötigen, oder Sie können navigator.msSaveBlob() verwenden (IE ist weder unterstützen das download Attribut so dass diese wird im Fall von IE zwei Fliegen mit einer Klappe schlagen.

Answer 2

Vielen Dank K3N für die Beantwortung meiner Frage, aber ich hatte keine Zeit, meinen Kopf um Ihre Antwort zu wickeln.

Ihre Antwort war genau das, was ich brauchte! Hier

ist das, was ich habe:

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