Поделиться Canvas в качестве изображения, используя FabricJS

Question

У холста My Fabric есть изображение в качестве фона и другое изображение из URL в пределах холста.

var canvas = new fabric.Canvas('resultCanvas');

 canvas.setBackgroundImage('someUrl/background.jpg', canvas.renderAll.bind(canvas), {
        backgroundImageOpacity: 0.5,
        backgroundImageStretch: false
    });

 fabric.Image.fromURL('someUrl/image.jpg', function (oImg) {
        oImg.left(100).oImg.top(100);
        canvas.add(oImg);
    }); 

Теперь мне нужно сделать этот холст изображением, чтобы поделиться им на фейсбуке.

Я пробовал функцию toDataUrl() из fabricJS одним нажатием кнопки, но она дает пустое изображение.

canvas.toDataURL({
        format: 'jpeg',
        quality: 0.8
    });

Даже функция сохранения как изображения, которую вы получаете, если щелкнуть правой кнопкой мыши на холсте в Chrome, дает пустое изображение.

Я попытался сериализовать его в JSON и SVG, но они также дают чистый холст. Я также попытался загрузить данные изображения на сервер через ajax и сохранить их как изображение на сервере. Там же я получаю пустое изображение на сервере.

Однако, если я изменил полотно FabricJS на статическое полотно, как показано ниже, все работает. Он появляется как изображение, когда вы сохраняете его как изображение в Chrome.

var canvas = new fabric.StaticCanvas('resultCanvas');

//instead of 

var canvas = new fabric.Canvas('resultCanvas');

Так что я должен сделать, чтобы он работал на обычном холсте, потому что мне нужна функциональность интерактивности FabricJS.

Answer 1

Когда вы используете toDataUrl, разве вы не должны передавать URL-адрес данных Base64? Что-то похожее на это: «data:image/png;base64,iVBORw0KGgoAAA...»