DOMException: исходное изображение не может быть декодировано

Question

Что может быть причиной того, что метод ниже выдает DOMException: The source image could not be decoded.?

async function drawImage(blob) {
    console.log('Start draw image.')
    console.log(blob);
    if(context === undefined) {
        console.log('Context is not defined.');
    } else if(blob.type === 'image/jpeg') {
        console.log('Drawing image');
        // Error: DOMException: The source image could not be decoded.
        const bmp = await createImageBitmap(blob);
        context.drawImage(bmp, 0, 0);
        bmp.close();
    }
}

Приведенный выше код выполняется внутри веб-работника, особенно после процесса декодирования:

onmessage = async function (e) {
    let jpegBlob = decodeBinary(e.data);
    drawImage(jpegBlob);
}

Answer 1

Ну, это может привести к повреждению изображения.

// The same would happen in a Worker thread,
// it's just easier for StackSnippet to log from main thread
const context = document.createElement('canvas').getContext('2d');

function decodeBinary() {
  return new Blob(["not an image"], {type: 'image/jpeg'});
}
async function drawImage(blob) {
  console.log('Start draw image.')
  console.log(blob);
  if (context === undefined) { // beware, unsupported call to getContext returns `null`, not `undefined`
    console.log('Context is not defined.');
  } else if (blob.type === 'image/jpeg') {
    console.log('Drawing image');
    // Error: DOMException: The source image could not be decoded.
    const bmp = await createImageBitmap(blob);
    context.drawImage(bmp, 0, 0);
    bmp.close();
  }
}

onmessage = async function(e) {
  let jpegBlob = decodeBinary(e.data);
  drawImage(jpegBlob).catch(console.error);
}

self.postMessage('', '*');

Итак, вы захотите проверить содержимое вашего BLOB-объекта и отладить функцию decodeBinary.

В качестве первого шага вы можете проверить, соответствует ли подпись файла одному из изображений JPEG:
new Uint8Array( (await blob.slice(0,3).arrayBuffer()) ).join("") === "255216255";

Вы также можете попробовать передать этот BLOB-объект в основной поток, создайте URL-адрес blob: и попробуйте загрузить его в тег <img>, ваш браузер может более четко определить суть проблемы.