画像形式変換 画像をbase64形式に変換

日々のプロジェクトでは、画像を Base64 形式に変換する必要がある場合がありますが、次の方法でローカル画像とネットワーク画像を Base64 形式に変換できます。

まず、最初のステップとして、キャンバスをインスタンス化する必要があります。これは、フォーマット変換を行うためにキャンバスを使用するためです。

Vue プロジェクトでは次のようにインスタンス化できます。

<canvas v-show="false"></canvas>

他のプロジェクトでは次のようになります。

<canvas style="dispaly:node"></canvas>

次に核心部分が来ます。

// 图片转为base64格式
export const imageToBase64 = (url, ext, callback) => {
  let canvas = document.createElement('canvas'); // 创建canvas DOM元素
  const ctx = canvas.getContext('2d');
  // eslint-disable-next-line no-var
  const img = new Image();
  img.crossOrigin = 'Anonymous';
  img.src = url;
  img.onload = function () {
    canvas.width = img.width ;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0, img.height, img.width); // 参数可自定义
    // eslint-disable-next-line no-shadow
    const dataURL = canvas.toDataURL(`image/${ext}`);
    callback(dataURL); // 回掉函数获取Base64编码
    canvas = null;
  };
};

最後に使用したとき:

 imageToBase64(
        `${window.location.origin}${imgUrl}`,
        'jpg',
        (base64) => {
            
          }
)