CODEWITHSUNDEEP
javascriptdomcreatejspreloadjs
Hydroper
Hydroper

Reputation: 433

Load image with PreloadJS and clone the result

I'm using PreloadJS from CreateJS and am successfully getting an HTMLImageElement:

const PreloadedAssets = {
    logo: null,

    // ...

    initializeMisc(loadQueue) {
        PreloadedAssets.logo = loadQueue.getResult('logo');
        console.log(PreloadedAssets.logo);
            // this is giving <img src="blob:...">
        // ...
    },

    // ...
}

That's how I add the image to the queue:

this.m_queue.loadFile({id: 'logo', src: 'res/img/logo/logo.png'});

As can be seen, PreloadedAssets.logo is assigned with a <img> element. But the problem I'm having is that it outputs a non-relevant blob. I'm also using img.cloneNode(true) to add the image to a container elsewhere:

let logo = PreloadedAssets.logo.cloneNode(true);
logo.style.transition = 'opacity 0.5s';
logo.style.opacity = '0';
logo.style.position = 'absolute';
logo.style.left = `${ProjectSettings.centerX(logo.offsetWidth)}px`;
logo.style.top = `${ProjectSettings.centerY(logo.offsetHeight) - 200}px`;
this.container.appendChild(logo);

This is giving the following request error:

blob:http://localhost:8080/70b2d643-5a19-43a3-8f69-708eff4bca9e:1 GET blob:http://localhost:8080/70b2d643-5a19-43a3-8f69-708eff4bca9e net::ERR_FILE_NOT_FOUND

What can I do to preload the image and get a complete Base64 URL with PreloadJS?

Update

I've noted that if I remove the call to cloneNode(true), the image displays successfully. How can I still use it?

Upvotes: 0

Views: 66

Answers (1)

Hydroper
Hydroper

Reputation: 433

Instead of [object Node].cloneNode() I had to create a helper:

export function cloneImage(img) {
    let canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    let ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    let r = document.createElement('img');
    r.src = canvas.toDataURL();
    r.draggable = img.draggable;
    r.style.cssText = img.style.cssText;
    r.width = img.width;
    r.height = img.height;
    return r;
}

That'll clone the image synchronously, resulting in a data: URL (base64), not a blob: one.

Upvotes: 0

Related Questions