I load an image and then I try to use this in the PIXI. But PIXI loads image again when I create a PIXI.Texture. If I set crossOrigin to "anonymous" it works fine and doesn't download a picture again. But how it works and what does it mean? Will it work on the internet or it works local only?
That's what I do that download image
image.crossOrigin = "anonymous";
image.src = "filePath";
image.addEventListener("load", doSomethingFunction, false);
Related
I have an input element with type=image:
<input type="image" src="some/url/that/generates/new/image">
I want to load that image into a canvas element. Usually I would do:
var img = new Image();
img.onLoad = function () {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
};
img.src = inputElement.src;
However, in this case I can not use the src attribute because doing so would generate a new image (the src points to a url that generates a new random image).
Any other ideas how to get to that image once its already loaded? In the chrome devtools I can see the image under the "Sources" tab, so its there...
--- edit
I should have mentioned that the html is not under my control, I am writing a chrome extension and I want to save to that image of the input tag (by attaching it to a post request, that already works. I just dont want to generate a new image by using the src attribute)
I am currently doing a javascript function that draws in an HTML canvas by doing some drawing inside of it AND loading an image from another website.
Everything was working fine until I needed to create a function to download it. At first, I was getting a security error because I didn't set the crossOrigin of the image I was loading as anonymous so I did. And then I was able to download the image. However, it made the image that I loaded in the canvas from the other website disappear. Any idea why?
Here is my function to download:
function download(){
var canvas=document.getElementById("canvas0");
$("#btn-download").on("click",(e)=>{
var data = canvas.toDataURL("data:image/png;");
var btn=document.getElementById("btn-download");
btn.href=data;
btn.download="Canvas.png";
});
}
And here is where I load the image and set the crossOrigin as anonymous.
img=new Image();
img.onload = function() {
context.drawImage(img, 285, 160);
};
img.src = 'somelink';
img.crossOrigin = "anonymous"
Thanks for your help!
Okay, after a lot of thinking, i realized that when the website was giving me the image, the Access-Control-Allow-Origin wasn't in the header SO it was impossible to avec the crossOrigin to anonymous.
If you have this problem, check in your console if the header has Access-Control-Allow-Origin or not.
I'm trying to preload an image via javascript and insert it into another image at the right moment without a new fetch.
Unfortuantely, when I replace the src of an img with the preloaded src, the image gets reloaded and chrome doesn't use the cashed one. What can I do?
This is how I preload the image:
if (document.images) {
this.img = new Image();
this.img.src = "img/img.jpg";
}
and later I'm inserting it like this:
this.poster.src = this.img.src;
Thanks!
Actually this code works fine. I was using a preprocessor that would prohibit caching. On the server everything works fine
I'm adding images to an HTML5 canvas using Javascript:
img = new Image();
img.addEventListener('load', loadCallBack, false);
img.src = image_url;
And then loadCallBack draws the image.
The problem is that sometimes the image_url refers to a broken or nonexistent image. When this happens, I get a 404 error in the console and the image on the canvas stays white. Instead, I'd like to be able to replace the image's src attribute with another image_url.
I tried the following and it did not work:
img.addEventListener("error", function(){console.log("404");});
How can I detect the 404s of the images?
Note: I'm still looking for a solution, as neither of the two posted so far has worked.
The same code as the Kostia's answer: just to compare the ugliness of jQuery and the beauty of vanilla javascript:
function brokenImage() { ... }
img = new Image();
img.onerror = brokenImage;
img.src = "invalid_img_name.png";
Works in jQuery for me... http://jsfiddle.net/5v2qG/
img = new Image();
$(img).bind('error', function () {
alert('error called');
});
img.src = "invalid_img_name.png";
I'm modifying some images on canvas and then setting src of this images to new base64 coded pictures.
img.src = changeColor(img);
changeColor returns base64 coded image:
return canvas.toDataURL();
Chrome and Opera are refreshing images after src change, but firefox don't!
I also inspected the image element by FireBug, and it shows new src and new image!
I have already tried to add Data to URL but uhh... this is a base64 coded image, not an url, so it breaks my pictures totally.
I there any way to force reload images or disable firefox cache via javascript?
UPDATE:
I have also tried to set image.src=''; in changeColor function.
It works in chrome, but in firefox... picture disappear, and do not appear again when i set new base64 value.
It's working for me as #dmmd mentioned. You only need to add query string with a random value.
id.src = "path?t=t"+ Math.random(5);
I am not using image data, but this worked for a similar issue where FF was not reloading when the src variable didn't change:
image.src = "";
setTimeout(function(){
image.src = //the new image src
}, 0);
Try adding the image format (and use jpg). It may re-encode the image:
return canvas.toDataURL('image/jpg');