So fügen Sie Bilder in HTML5 Canvas ein und speichern sie als Bilder

In diesem Artikel wird hauptsächlich die Methode zum Platzieren von Bildern in HTML5 Canvas und zum Speichern als Bilder vorgestellt. Insbesondere das Speichern von Bildinhalten als Bilder ist eine sehr praktische Funktion

Verwenden Sie JavaScript, um das Bild in die Leinwand zu kopieren

Um das Bild in die Leinwand zu platzieren, verwenden wir hier die Methode drawImage des Canvas-Elements:

 // Converts image to canvas; returns new canvas element

  function convertImageToCanvas(image) {

  var canvas = document.createElement("canvas");

  canvas.width = image.width;

  canvas.height = image.height;

  canvas.getContext("2d").drawImage(image, 0, 0);</p>
<p> return canvas;

  }

0, 0 Parameterkoordinatenpunkt auf der Leinwand, das Bild wird an diese Stelle kopiert.

Verwenden Sie JavaScript, um die Leinwand im Bildformat zu speichern

Wenn Ihre Arbeit an der Leinwand abgeschlossen ist, können Sie die Leinwanddaten mit der folgenden einfachen Methode konvertieren Bildformat:

// Converts canvas to an image

  function convertCanvasToImage(canvas) {

  var image = new Image();

  image.src = canvas.toDataURL("image/png");

  return image;

  }

Dieser Code kann Leinwand auf magische Weise in das PNG-Format konvertieren!

Diese Techniken zum Konvertieren zwischen Bildern und Leinwänden sind möglicherweise einfacher als Sie denken.

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:

HTML5 und JS implementieren die Funktion zum lokalen Zuschneiden und Hochladen von Bildern

Bildkomprimierung durch HTML5-Mobilentwicklungs-Upload Funktion

Das obige ist der detaillierte Inhalt vonSo fügen Sie Bilder in HTML5 Canvas ein und speichern sie als Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!