从数据 url 设置 fabric.js canvas 背景

Question

I am trying to set the fabric.js canvas background from a URL when clicking on an image.

I am trying to get this working when clicking on an image with the following code, which passes the photoURL from an element:

//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();
};

I have also tried passing the photoURL argument directly to the fabric.Image.fromURL() function, with and without the following onload() event.

var img = new Image();

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

    canvas.setBackgroundImage(f_img);

    canvas.renderAll();
};

img.src = photoURL;

This does not work either, all I get is a blank canvas.

Now when I use this code:

//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);
});

Everything works great, even though the img._element.attributes.src from fabric.Image.fromURL() is still a base64 data url and will load the image when copied to the browser, just like the selectCanvasEdit() .

Any help is greatly appreciated, I'm not understanding how the same type of img.src being passed to the fabric.js canvas is handled differently, even though the resulting data url can be loaded in the browser regardless of which function receives the data.

Answer 1

After trying everything, nothing is wrong with the code within the function which makes this a little confusing.

It hit me that I was exporting this function and the canvas was being defined var canvas = new fabric.Canvas('canvas-tools'); outside of this function.

If I grab hold of that element again within the function, everything works as it should.