Heim >Web-Frontend >js-Tutorial >Wie konvertiert man SVG-Bilder im Browser mithilfe von JavaScript in Bitmap-Bilder?

Wie konvertiert man SVG-Bilder im Browser mithilfe von JavaScript in Bitmap-Bilder?

DDD
DDDOriginal
2024-12-11 08:10:09495Durchsuche

How to Convert SVG to Bitmap Images in the Browser Using JavaScript?

SVG in Bitmap-Bilder im Browser konvertieren

Problem:

So konvertieren Sie SVG Bilder in Bitmap-Formate (JPEG, PNG usw.) umwandeln JavaScript?

Lösung:

Um diese Konvertierung im Browser mithilfe von JavaScript zu erreichen, können Sie diesen Schritten folgen:

  1. Verwenden Sie die Canvg-Bibliothek:

Installieren Sie die Canvg-Bibliothek, die das Rendern von SVG ermöglicht Bilder mithilfe der Canvas-API.

npm install --save canvg
  1. SVG rendern:

Verwenden Sie die Canvg-Bibliothek, um das SVG-Bild in ein Canvas-Element zu rendern .

const canvas = document.querySelector('canvas');
canvg(canvas, svgElement);
  1. Daten erfassen URI:

Erfassen Sie den Daten-URI des gerenderten Bildes im Canvas-Element.

const dataURI = canvas.toDataURL('image/jpeg'); // or 'image/png'

Mit diesem Ansatz können Sie SVG-Bilder im Browser in Bitmap-Formate konvertieren unter Verwendung von JavaScript und der Canvg-Bibliothek.

Das obige ist der detaillierte Inhalt vonWie konvertiert man SVG-Bilder im Browser mithilfe von JavaScript in Bitmap-Bilder?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn