Informationen zur Konvertierung zwischen Leinwand und Bild

Dieser Artikel zeigt Ihnen, wie Sie ein Bild in eine Leinwand konvertieren und wie Sie ein Bild aus einer Leinwand extrahieren. Ich hoffe, dass es für alle hilfreich ist. Konvertieren Sie JS Canvas in ein Bild
Originaldemo: JavaScript Canvas Image Conversion Demo
Auf der Mozilla Web Development Conference letzte Woche haben wir den größten Teil des Tages damit verbracht, zukünftige Mozilla-Marktanwendungen zu diskutieren. Instagram, die beliebteste mobile Anwendung der letzten Zeit, wurde für satte 1 Milliarde US-Dollar an FaceBook verkauft.
Es macht mir nichts aus, etwas mehr Geld zu verdienen, also habe ich beschlossen, eine App im Instagram-Stil zu erstellen (ich werde sie später teilen)

Dieser Artikel zeigt Ihnen, wie Sie ein Bild in eine Leinwand konvertieren und wie eine Leinwand ein extrahiert Bild .

Bild in Leinwand konvertieren

Um das Bild in Leinwand (Zeichenfläche, Leinwand) zu konvertieren, können Sie die Methode drawImage des Canvas-Elementkontexts verwenden:

// 把image 转换为 canvas对象 
function convertImageToCanvas(image) { 
// 创建canvas DOM元素，并设置其宽高和图片一样 
var canvas = document.createElement("canvas"); 
canvas.width = image.width; 
canvas.height = image.height; 
// 坐标(0,0) 表示从此处开始绘制，相当于偏移。 
canvas.getContext("2d").drawImage(image, 0, 0); 
return canvas; 
}

Leinwand in Bild konvertieren

Vorausgesetzt, dass das Bild auf der Leinwand verarbeitet wurde, können Sie die folgende Methode verwenden, um die Leinwand in ein Bildobjekt zu konvertieren.

// 从 canvas 提取图片 image 
function convertCanvasToImage(canvas) { 
//新Image对象，可以理解为DOM 
var image = new Image(); 
// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持 
// 指定格式 PNG 
image.src = canvas.toDataURL("image/png"); 
return image; 
}

Nun! Das Konvertieren von Bildern in Leinwand ist einfacher als Sie denken. Ich werde Ihnen in Zukunft verschiedene Bildverarbeitungstechnologien demonstrieren Zukunft. Großes Geld.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So erzielen Sie den Animationseffekt der Bildrotation in HTML5

Analyse inhaltsbearbeitbarer HTML5-Attribute

Das obige ist der detaillierte Inhalt vonInformationen zur Konvertierung zwischen Leinwand und Bild. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!