My issue only arises when the loaded image was preloaded somewhere else. For example, when I somewhere use a <img>-tag with the src attribute.
Have a look at this code:
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;" ></canvas>
<img src="https://local-spaces.fra1.digitaloceanspaces.com/test.jpg" width="50"/>
<button onclick="show()">Load Canvas Picture</button>
<script>
function show() {
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
const img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.onload = function(){
ctx.drawImage(img,0,0, 300, 150);
};
img.src = "https://local-spaces.fra1.digitaloceanspaces.com/test.jpg"
}
</script>
Note: If you are seeing the image in canvas correctly, please cache+hardreload your browser to see the error.
If you are clicking on the button and open your console, you will see that you are getting a CORS-error:
Access to image at
'https://local-spaces.fra1.digitaloceanspaces.com/test.jpg' from
origin 'null' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
Now let's take the next example to see that it is working without preloading the image: https://jsfiddle.net/akzxp9vs/
Note: To make this example work, it's super important that you are deleting your cache + hard reload your browser.
Only then you see that the correct header response is giving back.
Any ideas what I can do?
The image is on the S3 Cloud of Digital Ocean, called Spaces. The image itself is set to public and the CORS setting are set to:
The browser needs to know to check for CORS permissions when the HTTP request is made (i.e. to include an Origin header etc).
When you create a new Image object, it uses the cached data from the <img> element.
Add a crossorigin attribute to the existing <img> element or remove that <img> element entirely.
I found a better solution to my problem. #Quentin's solution is principally right, but it's just not practicable. I tried to update all <img>-tags, however in my page I have dozens of packages that are using the <img>-tag as well.
For example Leaflet. It's like Google Maps, but with Open Street Maps. You just don't have the control over to set attributes like crossorigin in custom icons.
So there had to be another solution. It feels bad to use it, but it does the job.
const src = new URL(imgUrl);
src.searchParams.append('cors', Date.now());
return src.href;
This code appends to your URL a query parameter and forces Chrome to reload the image without being cached.
Related
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 stuck when experimenting with blogger thumbnails. I don't want to use blogger default thumbnails since the size just 72px, it's very small. So, I found a method by rewriting the URL of the image source (the image hosted by google blogger service).
For example, I have an image in this URL http://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s1600/home%2Bthumbs.jpg, the image will loaded with max-width 1600px, indicated by the /s1600/ in the URL. I want to load the image at 300px width, then the URL will be http://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s300/home%2Bthumbs.jpg. Also, the image served in HTTP protocol by default, but it's possible to served in HTTPS just by adding https:// as the protocol.
This is my thumbnail markup:
<div class="thumbnail">
<a class="thumbTooltip" href="#" title="Flat Design Sample">
<img alt="Flat Design Sample" src="http://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s1600/home%2Bthumbs.jpg">
</a>
</div>
The question is, how I can rewrite the default image URL by using javascript method? I want to force the image served in HTTPS by rewriting http:// to https://, and served in 300px width by rewriting s1600 to s300. The final URL will look like this: https://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s300/home%2Bthumbs.jpg
The code is inside an window.onload to ensure that all elements are there. Then in the url-string the first replace() changes the protocol. The second uses a regular expression to find the segment where the size is defined and changes it to s300. It will work even when the images comes from another directory.
window.onload = function() {
var img = document.querySelector('.thumbnail img');
img.src = img.src.replace('http', 'https').replace(/\/s\d+(?=\/)/, '/s300');
};
Instead of the window.onload wrap you also can put the code in <script>-tags just before </body>.
Simple replacement of a token.
function getThumbnailUrl (element)
{
$url = element.href.split("/");
$url[7] = "s300";
return $url.join("/");
}
I have download the source from this http://www.storminthecastle.com/projects/imagefilters1/. It is regarding some image manipulation in html5 canvas.
Inside the source, it will load the image located in a local directory...
function reset() {
imageURL = "./sandbox.jpg";
imageFilter = grayscale;
document.querySelector("#filename").innerHTML = "";
update();
}
The above is working in my project. But I am trying to load an image from an url, so I modified it to the following...
function reset() {
imageURL = "http://xxxxxx.jpg";
imageFilter = grayscale;
document.querySelector("#filename").innerHTML = "";
update();
}
When I test it, the image is being displayed correctly. However, all the features are not working anymore and I don't know why. I have no idea why it cannot take in url as the argument and I don't know how to modify it to make it work. Any helps?
Thanks for the link provided. I further read on the COR issue and managed to locate that line of coding to be added.
img.crossOrigin = '';
//img domain different from app domain
img.src = 'http://xxx.jpg';
Simply set the crossOrigin property of the image to make it work. Basically, this will allow cross domain image for manipulation. Without it, any cross domain will be blocked and you will get the security exception. Really thanks for the helps! :)
To add-on, I have only tested using Chrome and is working.
I've run into an error that a lot of people seem to have gotten in the past but the explanations are not clear to me. After using the .getImageData() method in my javascript to get the pixel data of a picture that I have stored on my computer and inputed into an img tag in my HTML webpage I get the SecurityError: DOM Exception 18.
I'm simply running an HTMl file in my browser and it is preventing me from getting this stuff done. I've read about making a proxy to get around it or something or hosting the image on my own domain. I don't exactly understand what this means or how to go about doing it. So, it'd be greatly appreciated if anyone could help. I'll input my code here and leave a link to the image as well.
http://i.imgur.com/8UzWlWX.png
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<script>
function putimg() {
var img = document.getElementById('img');
var can = document.getElementById('C');
var ctx = can.getContext('2d');
ctx.drawImage(img, 0, 0);
var position = [];
var imgdata = ctx.getImageData(0,0, img.width, img.height);
var data = imgdata.data;
for (var i = 0; i < data.length; i += 4) {
if (data[i] == 255) {
var vertical = Math.floor((data.indexOf(data[i]) / 4) / 400);
var horizontal = Math.floor((data.indexOf(data[i]) / 4) % 400);
position.push(horizontal, vertical);
}
}
}
ctx.putImageData(imgdata, 0, 0);
}
</script>
</head>
<body onload="putimg()">
<h1>Test</h1>
<img id="img" src="circle-image-alone.png" style="display:none"></img>
<canvas id="C" width="600" height="600"></canvas>
</body>
</html>
EDIT: the file is now in the same folder as the html file, but the same error flag appears
The problem is that this is breaking Same-origin policy. You need to either have imgur relax their Cross-origin sharing or host the image yourself.
If you are running the HTML file directly from the file system on your computer then you can just download the image to the same folder as your html file is in, and reference it like
<img id="img" src="8UzWlWX.png" style="display:none"></img>
Here are the hoops you need to jump through to make it work through a foreign origin like imgur: https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
As you've discovered, your browser considers even your local file system to be a different domain.
So you’re still violating cross-domain even if your image and .html are in the same local directory.
You need a CORS compliant way of loading your image.
Here’s how:
Open up an account on dropbox.com and host your image there.
Be sure to put your image in the “public” folder they set up for you.
They allow cross-domain downloading of their images from your “public” folder.
To get the URL of your dropbox image:
Right-click the image in your public folder and select “copy public link”.
This will put the url into your clipboard where you can paste it into your code.
Then use this code to download your image into the browser in a CORS compliant way:
// download an image from dropbox.com
// in a CORS compliant way
var img=new Image();
img.onload=function(){
ctx.drawImage(img, 0, 0);
}
img.crossOrigin="anonymous";
img.src="dropbox.com/yourDropboxAccount/yourImage.png";
The result is an image that you can fully examine/change/save with:
ctx.getImageData
ctx.putImageData
ctx.toDataURL.
I would like to be able to download a Html5 canvas element as an image with the file extension with Javascript.
The CanvasToImage library does not seem to be able to achieve this.
Here is my code so far which you can see at this JsFiddle.
<div id="canvas_container">
</div>
<p>
create
download
</p>
$("#create_image").click(function() {
var cnvs = createSmileyOnCanvas();
$('#canvas_container').append(cnvs);
});
$("#download_image").click(function() {
var img = $('#smiley_canvas').toDataURL("image/png");
var uriContent = "data:application/octet-stream," + encodeURIComponent(img);
window.open(uriContent, 'download smiley image');
});
function createSmileyOnCanvas() {
var canvas = document.createElement('canvas');
canvas.id = 'smiley_canvas';
var ctx = canvas.getContext('2d');
// Draw shapes
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
return canvas;
}
This seems to work for me:
<a id="downloadImgLink" onclick="$('#downloadImgLink').attr('href', canvas.toDataURL());" download="MyImage.png" href="#" target="_blank">Download Drawing</a>
In order to force/suggest a file name in the browser's download dialog, you would need to send the Content-Disposition: attachment; filename=foobar.png header.
This is not possible to do via window.open, so you're out of luck unless there are some browser-specific hacks for this.
If you really need the filename, you could try using the new download attribute in a, <a href="put stuff here" download="filename here">. It isn't very widely supported yet though.
Another alternative would be to first submit the data to the server using ajax, then redirect the browser to some server-side script which would then serve the data with the correct header.
Hi i have created a jquery plugin which will let you do the same task with ease but it also make use of php to download the image. let me explain how it works
Plugin has 2 sub function that you can call independently to add image to the canvas and the other one is to download the current image lying on the canvas.
Add image to the canvas
For this you need to pass the id of the canvas element and the path of the image you want to add
download image from the canvas
For this you need to pass the id of the canvas element
$('body').CanvasToPhp.upload({
canvasId: "canvas", // passing the canvasId
image: "455.jpg" // passing the image path
});
// downloading file
$('#download').click(function(){
$('body').CanvasToPhp.download({
canvasId: "canvas" // passing the canvas id
}); //
});
First you need to download the plugin file which you can find here http://www.thetutlage.com/post=TUT213
I have also created a little demo http://thetutlage.com/demo/canvasImageDownload