【解決方法】ファイルをブロブに書き込む方法がわかりません

プログラミングQA

2022.12.17

コードには 2 つのバージョンがあります。最初のバージョンでは、blob に書き込まれる画像です (これを探して入力にドロップします)。

JavaScript

let File = document.querySelector('input').files[0]
let blobUpload = new Blob([File], {type: 'image/jpg'},)

2 番目のオプションでは、画像は BLOB に書き込まれません

JavaScript

let File = new Image()
File.src = "car1.jpg"
let blobUpload = new Blob([File], {type: 'image/jpg'},)

私が試したこと：

私が理解しているように、imgをファイルとして認識しません
問題は、ファイルをドラッグせずに手動で画像を記録するにはどうすればよいかということです。

解決策 1

新規作成 Image そしてその設定 src 意思 いいえ スクリプトをブロックし、イメージのダウンロードが完了するまで待ちます。

リモート画像がロードされるのを待ってから、キャンバスを使用してそれを変換する必要があります Blob:
https://javascript.info/blob#image-to-blob[^]

いくつかのヘルパーメソッドを作成します。

const loadImageAsync = (url) => new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject(`Unable to load image ${url}.`);
    img.setAttribute("crossorigin", "anonymous");
    img.src = url;
});

const imageToBlobAsync = (img, type = "image/png") => new Promise((resolve, reject) => {
    const canvas = document.createElement("canvas");
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    
    const context = canvas.getContext("2d");
    context.drawImage(img, 0, 0);
    
    canvas.toBlob(resolve, type);
});

次に、コールバックをメソッドに渡すことができます。

JavaScript

loadImageAsync("car1.jpg").then(img => imageToBlobAsync(img, "image/jpg")).then(blobUpload => {
    ...
});

または使用を async 関数[^]:

JavaScript

const uploadImage = async () => {
    const img = await loadImageAsync("car1.jpg");
    const blobUpload = await imageToBlobAsync(img, "image/jpg");
    ...
};