We Keep Coding

How to wait for image to load before setting scope in AngularJS?

I'm using AngularJS and TypeScript. I am using the cytoscape library with the extension cytoscape-edgehandles and the wrapper ngCytoscape for AngularJS. I am trying to add an image to the hover handle of the nodes, however the implementation of the drawImage method in cytoscape-edgehandles 2.7.1 does not wait for the image to load before drawing, therefore a range error occurs.
I have tried to give the cytoscape graph the options after the image is loaded, however the cytoscape graph expects the options to immediately be available for use. So somehow I need to load the image before passing it to the graph.
In the constructor of the controller:
this.$scope.ehOptions = this.GetEhOptions();
The get EhOptions method:
protected GetEhOptions(): GraphModels.EhOptions {
var options = new GraphModels.EhOptions;
var img = new Image();
img.width = 25;
img.height = 25
img.src = "../../Content/icons/ic_circle_add_24px.svg";
options.handleImage = img;
img.addEventListener('load', e => {
return options;
});
}
This results in the options never being loaded by the graph. If I do this in stead, I get all the options, except the image:
var options = new GraphModels.EhOptions;
var img = new Image();
img.width = 25;
img.height = 25
img.src = "../../Content/icons/ic_circle_add_24px.svg";
img.addEventListener('load', e => {
options.handleImage = img;
});
return options;
The code of cytoscape-edgehandles concerning the handleIcon:
if(options().handleIcon){
var icon = options().handleIcon;
var width = icon.width*cy.zoom(), height = icon.height*cy.zoom();
ctx.drawImage(icon, hx-(width/2), hy-(height/2), width, height);
}
If it is changed to this, then it works:
if (true) {
var img = new Image();
var width = 25 * cy.zoom();
var height = 25 * cy.zoom();
img.width = width;
img.height = height
img.src = "../../Content/icons/ic_circle_add_24px.svg";
img.addEventListener('load', e => {
ctx.drawImage(img, hx - (width/2), hy - (height/2), width, height)
})
}
However, I cannot change the library code.
Hope you have any ideas. Thanks!

Create an AngularJS promise:
protected GetEhOptions(): GraphModels.EhOptions {
var deferred = $q.defer();
var options = new GraphModels.EhOptions;
var img = new Image();
img.width = 25;
img.height = 25
img.src = "../../Content/icons/ic_circle_add_24px.svg";
options.handleImage = img;
img.addEventListener('load', e => {
̶r̶e̶t̶u̶r̶n̶ ̶o̶p̶t̶i̶o̶n̶s̶;̶
deferred.resolve(options);
});
img.addEventListener('error', e => {
deferred.reject(e);
});
return deferred.promise;
}
Then extract the options from the returned promise:
this.GetEhOptions().then(options => {
this.$scope.ehOptions = options;
});
For more information, see
AngularJS $q Service API Reference - The Deferred API

I don't have any idea about cytoscape, but try this,
options:any = new GraphModels.EhOptions;
let globleThis = this;
var img = new Image();
img.width = 25;
img.height = 25
img.src = "../../Content/icons/ic_circle_add_24px.svg";
this.options.handleImage = img;
img.addEventListener('load', e => {
this.GetEhOptions(globleThis.options);
});
protected GetEhOptions(options): GraphModels.EhOptions {
return options;
}
or
var options = new GraphModels.EhOptions;
var img = new Image();
img.width = 25;
img.height = 25
img.src = "../../Content/icons/ic_circle_add_24px.svg";
img.addEventListener('load', e => {
return options.handleImage = img;
});

No experiance with a specific library but I worked with similar ones. In those cases I wrapped it into my own directive and then controlled the creation from there directly. In that case you have access to the $element and you can create it on the fly.

Why does JavaScript not load all pictures?

I have this code snippet below...
You can see I am trying to load 9 pictures.
When I execute the following code, I only get an alert 7 times and the console does never log "all images loaded". Why is this?
var images = [];
edge_topleft = new Image(); images.push(edge_topleft);
edge_topright = new Image(); images.push(edge_topright);
edge_bottomleft = new Image(); images.push(edge_bottomleft);
edge_bottomright = new Image(); images.push(edge_bottomright);
edge_cross = new Image(); images.push(edge_cross);
block = new Image(); images.push(block);
ice = new Image(); images.push(ice);
way_lr = new Image(); images.push(way_lr);
way_ud = new Image(); images.push(way_ud);
var len = images.length;
var counter = 0;
[].forEach.call(images, function( img ) {
img.addEventListener( 'load', incrementCounter, false);
} );
function incrementCounter() {
counter++;
alert(counter);
if ( counter === len ) {
console.log("all images loaded");
}
}
edge_topleft.src = "https://dummyimage.com/10";
edge_topright = "https://dummyimage.com/20";
edge_bottomleft = "https://dummyimage.com/30";
edge_bottomright.src = "https://dummyimage.com/40";
edge_cross.src = "https://dummyimage.com/50";
block.src = "https://dummyimage.com/60";
ice.src = "https://dummyimage.com/70";
way_lr.src = "https://dummyimage.com/80";
way_ud.src = "https://dummyimage.com/90";
Here is the fiddle: https://jsfiddle.net/hnoaj8bg/
Anybody that knows what I'm doing wrong?

How can I load an array of images to be faded?

I have the following code where I am loading only one image. But I want to load multiple images from e folder and then to fade them in and out. But what I am interesting in, is how can I load all images from a folder without to repeat the code, as src="frames/frame_1" src="frames/frame_2" i want something soft as src="frames/frame_" + i + ".jpg" where i is the number of the frame
this is how I load only one image now
var img = new Image();
var div = document.getElementById('foo');
img.onload = function() {
div.appendChild(img);
};
img.src = 'frames/frame_1.jpg';

It's relatively simple. You basically put the code you already had in a loop:
var img, i,
imageCount = 5,
div = document.getElementById('foo');
for(i = 0; i < imageCount; i++){
img = new Image();
img.onload = function() {
div.appendChild(img);
};
img.src = 'frames/frame_' + i + '.jpg';
}

You can use a loop for :
var img,
div = document.getElementById('foo');
for (var i = 0, nbImg = 5; i < nbImg; i++) {
img = new Image();
img.onload = function() {
div.appendChild(img);
};
img.src = 'frames/frame_'+i+'.jpg';
}

Canvas to data url not working properly

I have a function that takes an img-element and returns a data url. This works like 7/10 times and returns a blank image 3/10 times. I view the created data url through my browser(chrome) and use the same images so I know that this function is returning broken images. Can anyone spot why?
function imgToDataURL(img) {
var canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
var c = canvas.getContext('2d');
c.drawImage(img, 0, 0);
dataurl = canvas.toDataURL();
return dataurl;
}
$(function() {
img = new Image();
img.crossOrigin = '';
img.onload = function() {
newimg = new Image();
newimg.onload = function() {
document.body.appendChild(newimg);
}
newimg.src = imgToDataURL(img);
}
img.src = 'https://somedomain.s3.amazonaws.com/someimg.png';
});
This example works most of the time but sometimes ends with a large white rectangle instead of the image.

You have to wait for images to load before drawing them using .drawImage function.
Only after the image is loaded by the browser you can call your imgToDataURL function.
Something like this:
var image_sources = ["img1.png", "img2.png", "..."];
for(var i=0; i<image_sources.length; i++) {
var new_img = document.createElement("img");
new_img.onload = function() {
imgToDataURL(this);
};
new_img.src = image_sources[i];
}

JavaScript imagemap code doesn't work

What is wrong with this code? Why is my imagemap not working?
function createimg()
{
var img = new Image();
img.src='link/to/image';
img.alt='Next image'; img.id = 'span1'; img.style.zIndex = 10;
img.style.position = 'absolute';
img.style.display='block';
img.style.top = '130px';
img.style.padding='10px';
img.style.left='440px';
img.usemap='#testmap';
img.className ='dynamicSpan';
document.body.appendChild(img);
var mymap = document.createElement('map');
mymap.name = 'testmap';
document.body.appendChild(mymap);
var areatag = document.createElement('area');
areatag.shape = 'rect';
areatag.coords = '900,200,1100,1000' ;
areatag.href = 'http://www.google.com';
mymap.appendChild(areatag);
document.body.appendChild(areatag);
return img;
}
UPDATE:
I reconstructed my code like this, but it is still not functional:
function createimg()
{
var img = new Image();
img.src='link/to/image';
img.alt='Next image';
img.id = 'span1';
img.style.zIndex = 10;
img.style.position = 'absolute';
img.style.display='block';
img.style.top = '130px';
img.style.padding='10px';
img.style.left='440px';
img.usemap='#testmap';
img.className ='dynamicSpan';
var mymap = document.createElement('map');
mymap.name = 'testmap';
mymap.id = 'testmap';
var areatag = document.createElement('area');
areatag.shape = 'rect';
areatag.coords = '0,0,500,500' ;
areatag.href = 'http://www.google.com';
areatag.target = '_blank';
//append area to map
mymap.appendChild(areatag);
// append map to document
document.body.appendChild(mymap);
//append image to document
document.body.appendChild(img);
return img;
}

here's the solution:
you should use
img.setAttribute("usemap", '#testmap')
instead of:
img.usemap = "#testmap"

You have created element instance "mymap", but didn't added (not appended) it to the document, as you did it for "img" (appendChild).
document.createElement(name) creates an instance of element, but not appends it to the document.

it may be that the order in which you do things is not good.
i think you should:
create img element (+set its attrs)
create map element (+set its attrs)
create area element (+...)
append area to map
append map to document
append image to document

In addition to Viktor's answer:
img.usemap='#testmap';
...
mymap.name = 'testmap';
You will probably need to give mymap an id of "testmap"