We Keep Coding

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?

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.

How to draw an image in a canvas

So I was trying to draw animgin a canvas I tried everything but in the console it says img is not a property or something like that I don't remember so can anyone help?
Here's the js
function setupcanvas() {
var canvas = document.querySelector('canvas')
var c = canvas.getContext("2d")
c.beginPath();
var img = new image()
img.src = "flappy_bird_bird.png"
img.onload = function(){
c.drawImage(img, 100, 100)
}
}
Edit
Thx to mhkanfer "sorry if the name is wrong" I fixed it

You were mostly right, though their are a couple of things:
Make sure Image() is capitalized
Make sure your image src file actually exists in that directory
And make sure your canvas has a width and height, if you haven't specified that anywhere, you canvas wont be shown
If you were to revise this, it would look something like:
function setupcanvas() {
var canvas = document.querySelector('canvas')
var c = canvas.getContext("2d")
canvas.width = canvas.height = 200;
var img = new Image()
img.src = "example.png"
img.onload = function(){
c.drawImage(img, 0, 0)
}
}

JS/Jquery Image Resizing

I'm currently attempting to dynamically retrieve the location of an image and load it into a html5 canvas. The canvas is in a bootstrap responsive environment hence I never know the actual width of the canvas until the document is ready. Using the code below I've managed to resize the image and canvas to what I require but the image quality is very poor. I'm thinking it is because of the vast reduction in size but again unfortunately I have no control over the size of the original image uploaded.
function load_canvas_image(photo_type, vehicle_index) {
image_location = get_image_location(photo_type, vehicle_index);
var img = new Image();
img.src = image_location;
var canvas = $("#myCanvas")[0];
var canvas_context = canvas.getContext("2d");
canvas_width = canvas.width;
canvas_height = canvas.height;
img.onload = function() {
cur_height = img.height;
cur_width = img.width;
aspect_ratio = cur_width/canvas_width;
new_height = cur_height/aspect_ratio;
canvas.height = new_height;
canvas_context.drawImage(img, 0, 0, canvas.width, canvas.height);
}
};
$(document).on("change", "#add_damage_location", function() {
load_canvas_image($(this).val(), $('#vehicle_index').val());
});
I'm hoping someone knows how to use a similar method to reduce the width and height of an image using a similar method to the above whilst keeping the quality of the image as good as possible, I know to expect some reduction in quality but in it's current state it is unusable.
Thanks in Advance

Chrome cannot get the width and height from an image created by JavaScript

My web application has many image presentation features, and most of time we need to resize them. I attempted to get its real width and height values by the following fragment code:
var image = new Image();
image.src = IMAGE_URL;
var width = image.width;
var height = image.height;
The above code runs no problem on browsers like Firefox and IE 10, but it returns 0 on Chrome. I guess Chrome doesn't support this.
Can anybody gives me guidance on this?

you need to get width and height after the image loads and understands what its made of.
try:
var image = new Image();
image.onload = function() {
var width = image.width;
var height = image.height;
}
image.src = IMAGE_URL;
hope that helps

Try this
img = new Image();
img.onload = function() {
width = this.width;
height = this.height;
};
Onload help you to get width and height.

You need to wait for the load event, otherwise the dimensions of the image won't be known.
var image = new Image();
image.onload = function() {
var width = image.width;
var height = image.height;
// These values will now be correct.
};
image.src = IMAGE_URL;

Resize image without DOM elements?

I just wrote a little script that resizes uploaded images into canvas thumbnails. While resizing images it slows down the rest of the web page.
I just discovered web workers which I was hoping I could use to alleviate this problem by moving the resizing task into the background.
The MDN article says you can't access the DOM, which is fine, but I was hoping I could still create DOM elements and pass a canvas back.
However, the Image object doesn't even seem to exist from inside my worker thread. Chrome tells me:
Uncaught ReferenceError: Image is not defined resize_image.js:4
So... is there a way to do this without using those elements? I just want to manipulate the image data and then pass it back to the main thread in a usable form. I don't really care about the DOM elements themselves, but I'm not sure if the JS API gives me any other options?
My current resize method, which requires access to DOM elements:
resizeImage: function(file, width, height, callback) {
var reader = new FileReader();
reader.onload = function (fileLoadEvent) {
var img = new Image();
img.onload = function() {
var srcX = 0, srcY = 0, srcWidth = img.width, srcHeight = img.height, ratio=1;
var srcRatio = img.width/img.height;
var dstRatio = width/height;
if(srcRatio < dstRatio) {
ratio = img.width/width;
srcHeight = height*ratio;
srcY = (img.height-srcHeight)/2;
} else {
ratio = img.height/height;
srcWidth = width*ratio;
srcX = (img.width-srcWidth)/2;
}
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.drawImage(this, srcX, srcY, srcWidth, srcHeight, 0, 0, width, height);
callback(canvas);
};
img.src = reader.result;
};
reader.readAsDataURL(file);
},