Рисование ImageBitMap / Image в OffScreenCanvas в веб-работнике - PullRequest
Новая
       56

Рисование ImageBitMap / Image в OffScreenCanvas в веб-работнике

0 голосов
/ 20 марта 2020

У меня есть приложение vue. js, в котором я настроил vue -работников / веб-работников для выполнения некоторой обработки изображений (масштабирование / обрезка) в фоновом режиме после того, как пользователь загрузил пару изображений.

Я решил go с ImageBitMpas & OffScreenCanvas, поскольку Canvas и Image Object не поддерживаются веб-работниками. Я могу создать ImageBitMap из моего файла изображения с помощью метода CreateImageBitMap (). Он успешно возвращает обещание, а затем преобразуется в ImageBitMap. Я могу распечатать его на своей консоли и посмотреть, как создается ImageBitMap! Я добавил изображение ImageBitmap, напечатанное на консоли ниже.

ImageBitmap создан и выдается ошибка 

var loadingImage = new Image();
loadingImage.onload = () => {

    console.log(createImageBitmap(loadingImage)); // I can see the ImageBitmap logged to console
    const canvas = new OffscreenCanvas(100,100);
    const ctx = canvas.getContext('2d');

    Promise.all([
        createImageBitmaps(loadingImage);
    ]).then(function(result){
        console.log("printing promise resolved");
        console.log(result);
        ctx.drawImage(result,0,0,200,200);  /// <-- this is where error is thrown
    })  

    // other code here .... 

};
loadingImage.src = base64Src;

Вопрос: Где у меня возникают проблемы, когда Я передаю этот ImageBitMap методу OffScreenCanvas.draw (). Я получаю сообщение об ошибке «Не удалось выполнить drawImage для OffscreenCanvasRenderer ...». Вы можете увидеть точную ошибку в консоли после того, как ImageBitMap напечатан на рисунке ниже.

Кто-нибудь успешно рисовал изображение в OffScreenCanvas в vue -работнике / веб-работнике? Любой пример рабочего кода будет принята с благодарностью!

Также из моего исследования кажется, что createImageBitMap () поддерживается только в Chrome ?! Есть ли другой способ вместо использования ImageBitMap для рисования в OffScreenCanvas, который будет работать как на chrome, так и на Safari ???

...