JavaScriptを使用して画像をデータURIに変換する

javascriptを使用して画像をHtmlページタグからデータURIに変換するには、最初にキャンバス要素を作成し、その幅と高さを画像と同じに設定し、画像を描画して、最後にtoDataURLメソッドを呼び出す必要があります。

これにより、画像のbase64でエンコードされたデータURIが返されます。たとえば、IDがmy-imageの画像がある場合は、次の-

例

function getDataUrl(img) {
   // Create canvas
   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   // Set width and height
   canvas.width = img.width;
   canvas.height = img.height;
   // Draw the image
   ctx.drawImage(img, 0, 0);
   return canvas.toDataURL('image/jpeg');
}
// Select the image
const img = document.querySelector('#my-image');
img.addEventListener('load', function (event) {
   const dataUrl = getDataUrl(event.currentTarget);
   console.log(dataUrl);
});

出力

これにより、出力が得られます-

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB