画像フォーマットの相互変換 - フロントエンド

canvas でイメージを描画するなど、イメージ形式に変換するフロントエンドのシナリオは数多くあります：

• ウェブイメージを指定してください: url -> base64。
• インターフェイスは、Blob または File ファイルストリームであることが期待されます: Base64 -> Blob -> File;。
• more...

I. url-> base64

export function getDataUri(url) {
 return new Promise((resolve, reject) => {
 let image = new Image();
 // CORS ポリシー、クロスドメインの問題がある https://.///--or
 image.setAttribute('crossOrigin', 'anonymous'); // イメージへのクロスドメインアクセスを許可する
 image.crossOrigin = 'Anonymous';
 
 image.src = url;
 image.onload = function () {
 let canvas = document.createElement('canvas'),
 width = image.width, // canvasファイルのサイズはイメージと同じである。
 height = image.height;
 canvas.width = width;
 canvas.height = height;
 canvas.getContext('2d').drawImage(this, 0, 0, width, height);
 // Data URI
 resolve(canvas.toDataURL('image/png'));
 };
 // console.log(image.src);
 image.onerror = () => {
 reject(new Error('イメージストリーム例外'));
 };
 });
}

Base64 -> ファイル> Blob -> File

/**
 * @return Promise base64 ブロブに変換する
 * @param {String} b64data base64
 * @param {String} name イメージ名
 * @param {String} type イメージタイプ デフォルト： image/jpeg, image/png...
 */
export function base64ToBlob(dataURL, name, type = 'image/jpeg', sliceSize = 512) {
 const base64 = dataURL.split(',')[1];
 return new Promise((resolve, reject) => {
 // atob()メソッドを使用してデータをデコードする。
 let byteCharacters = window.atob(base64);
 let byteArrays = [];
 for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
 let slice = byteCharacters.slice(offset, offset + sliceSize);
 let byteNumbers = [];
 for (let i = 0; i < slice.length; i++) {
 byteNumbers.push(slice.charCodeAt(i));
 }
 // 8 ビット単位の符号なし整数値の型付き配列。内容は0に初期化される。
 // 要求されたバイト数が割り当てられない場合、例外がスローされる。
 byteArrays.push(new Uint8Array(byteNumbers));
 }
 let result = new Blob(byteArrays, {
 type: type,
 name,
 });
 result = Object.assign(result, {
 lastModified: new Date().getTime(),
 lastModifiedDate: new Date(),
 name: name,
 webkitRelativePath: '',
 // URLを使う.createObjectURL() Blobオブジェクト用の一時URLを作成する
 preview: URL.createObjectURL(result), 
 });
 // Blob -> File
 const newFile = new File([result], result.name, {type: result.type})
 resolve(newFile);
 });
}

Blob -> ファイル> Base64

export function blobToBase64(blob) {
 return new Promise((resolve, reject) => {
 const fileReader = new FileReader();
 fileReader.onload = (e) => {
 resolve(e.target.result);
 };
 // readAsDataURL
 fileReader.readAsDataURL(blob);
 fileReader.onerror = () => {
 reject(new Error('ファイルストリーム例外'));
 };
 });
}