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

[ad_1]

コードには 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[^]

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

C#
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");
    ...
};

[ad_2]

コメント

タイトルとURLをコピーしました