javascript - 从数据 url 设置 fabric.js 画布背景

问题描述

单击图像时，我正在尝试从 URL 设置 fabric.js 画布背景。

当单击具有以下代码的图像时，我试图使其工作，该代码photoURL从元素传递：

//Change background using Image
export function selectCanvasEdit(photoURL) {
    // replace the map on select
    let theMap = document.getElementById('google-map')
    let theCanvas = document.getElementById('canvasContainer')


    let canH = theMap.offsetHeight
    let canW = theMap.offsetWidth

    theCanvas.style.display = ''
    theMap.style.display = 'none'

    canvas.setBackgroundColor('', canvas.renderAll.bind(canvas));
    canvas.setBackgroundImage(0, canvas.renderAll.bind(canvas));


    var request = new XMLHttpRequest();
    request.open('GET', photoURL, true);
    request.responseType = 'blob';
    request.onload = function () {
        var reader = new FileReader();
        reader.readAsDataURL(request.response);
        reader.onload = function (e) {
            console.log('DataURL:', e.target.result);
            fabric.Image.fromURL(e.target.result, function (img) {
                canvas.setHeight(canH);
                canvas.setWidth(canW);
                let imgWidth = img.width;
                let imgHeight = img.height;
                let canvasWidth = canvas.getWidth();
                let canvasHeight = canvas.getHeight();


                img.scaleToWidth(canvasWidth);

                canvas.setBackgroundImage(photoURL, canvas.renderAll.bind(canvas), {
                    scaleX: canvas.width / img.width,
                    scaleY: canvas.height / img.height
                });
            });
        };
    };
    request.send();
};

我还尝试将photoURL参数直接传递给fabric.Image.fromURL()函数，无论是否有以下onload()事件。

var img = new Image();

img.onload = function() {
    var f_img = new fabric.Image(img);

    canvas.setBackgroundImage(f_img);

    canvas.renderAll();
};

img.src = photoURL;

这也不起作用，我得到的只是一张空白画布。

现在当我使用这段代码时：

//Change background using Image
document.getElementById('bg_image').addEventListener('change', function (e) {

    // replace the map on select
    let theMap = document.getElementById('google-map')
    let theCanvas = document.getElementById('canvasContainer')


    let canH = theMap.offsetHeight
    let canW = theMap.offsetWidth

    theCanvas.style.display = ''
    theMap.style.display = 'none'

    canvas.setBackgroundColor('', canvas.renderAll.bind(canvas));
    canvas.setBackgroundImage(0, canvas.renderAll.bind(canvas));
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function (f) {
        var data = f.target.result;
        fabric.Image.fromURL(data, function (img) {
            debugger;
            canvas.setHeight(canH);
            canvas.setWidth(canW);
            let imgWidth = img.width;
            let imgHeight = img.height;
            let canvasWidth = canvas.getWidth();
            let canvasHeight = canvas.getHeight();

            let imgRatio = imgWidth / imgHeight;
            let canvasRatio = canvasWidth / canvasHeight;

            img.scaleToWidth(canvasWidth);
            //img.scaleToHeight(canvasHeight);

            canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
                scaleX: canvas.width / img.width,
                scaleY: canvas.height / img.height
            });
        });
    };
    reader.readAsDataURL(file);
});

一切都很好，即使img._element.attributes.srcfromfabric.Image.fromURL()仍然是一个 base64 数据 url，并且在复制到浏览器时会加载图像，就像selectCanvasEdit().

非常感谢任何帮助，我不明白传递给fabric.js画布的相同类型的img.src如何以不同的方式处理，即使可以在浏览器中加载生成的数据url，而不管哪个函数接收数据.

标签： javascripthtml5-canvasfabricjs

javascript - 从数据 url 设置 fabric.js 画布背景

问题描述

解决方案

推荐阅读