I am using FabricJS' loadFromJSON method to load a bunch of objects (text and images) to a canvas.
The images are coming from Google Cloud Storage. The bucket they are stored in has the correct CORS settings, for allow all for "Access-Control-Allow-Origin".
The images will load in OK, but when trying to save a thumbnail, using the toDataURL() method, I get:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
I'm unsure why, because the images CORS settings are correct.
I know some people suggest creating a new image and setting the attribute that way, but that doesn't fit in with using the very quick and easy loadFromJSON method.
Any ideas on why the CORS settings are being ignored and anyway around this issue?
Related
im trying to load an image with p5.js loadImage(image);.
Im using the p5 library on my desktop.
Im not using the browser editor when im using the browser editor it handles the loading just fine
but im getting 2 errors the first one says
Fetch API cannot load
file:///C:/Users/3worl/OneDrive/Skrivebord/G_O_E/planet.jpg. URL scheme
must be "http" or "https" for CORS request.
the second one says
p5.js:65680 Uncaught (in promise) TypeError: Failed to fetch
Your error message is pretty explicit:
Fet API cannot load file:///C://..... URL scheme must be "http" or "https"
You are trying to access a file like you would do in the window file explorer with the path file:///C://... which doesn't work in javascript code.
If you look at the loadImage() doc you'll read:
The path to the image should be relative to the HTML file that links in your sketch. Loading an image from a URL or other remote location may be blocked due to your browser's built-in security.
So let's say that your sketch is located on C:/Users/3worl/OneDrive/Skrivebord/G_O_E/sketch.js and your image on C:/Users/3worl/OneDrive/Skrivebord/G_O_E/assets/planet.jpg you will need to use loadImage('assets/planet.jpg') i.e. using the path of the image relative to the sketch.
Note that if you could also use an URL if the image is hosted online, like loadImage('https://earthsky.org/upl/2018/01/planet-artist.jpg') but that require that you host your image online which will require a webserver or an hosting service.
The problem
My website fails to load random images at random times.
Intermittent failure to load image with the following error in console:
"GET example.com/image.jpg net::ERR_CONTENT_LENGTH_MISMATCH"
Image either doesn't load at all and gives the broken image icon with alt tag, or it loads halfway and the rest is corrupted (e.g. colors all screwed up or half the image will be greyed out).
Setup
Litespeed server, PHP/mySQL website, with HTML, CSS, Javascript, and JQuery.
Important Notes
Problem occurs on all major web browsers - intermittently and with various images.
I am forcing UTF-8 encoding and HTTPS on all pages via htaccess.
Hosting provider states that all permissions are set correctly.
In my access log, when an image fails to load, it gives a '200 OK' response for the image and lists the bytes transferred as '0' (zero).
It is almost always images that fail to load but maybe 5% of the time it will be a CSS file or Javascript file.
Problem occurred immediately after moving servers from Apache to Litespeed and has been persistent over several weeks.
Gzip and caching enabled.
This error is definite mismatch between the data that is advertised in the HTTP Headers and the data transferred over the wire.
It could come from the following:
Server : If a server has a bug with certain modules that changes the content but don't update the content-length in the header or just doesn't work properly.
Proxy : Any proxy between you and your server could be modifying the request and not update the content-length header.
This could also happens if setting wrong content-type.
As far as I know, I haven't see those problem in IIS/apache/tomcat but mostly with custom written code. (Writing image yourself on the response stream)
It could be even caused by your ad blocker.
Try to disable it or adding an exception for the domain from which the images come from.
Suggest accessing the image as a discrete url using cURL, eg
php testCurlimg >image.log 2>&1 to see exactly what is being returned by the server. Then you can move upon level to test the webpage
php testCurlpg >page.log 2>&1 to see the context for mixed data
I just ran into this same ERR_CONTENT_LENGTH_MISMATCH error. I optimized the image and that fixed it. I did the image optimization using ImageOptim but I'm guessing that any image optimization tool would work.
Had this problem today retrieving images from Apache 2.4 when using a proxy I wrote in php to provide a JWT auth gateway for accessing a couchdb backend. The proxy uses php fsockopen and the fread() buffer was set relatively low (30 bytes) because I had seen this value used in other peoples work and I never thought to change it. In all my failing JPG (JFIF) images I found the discrepancy in the original versus the image served was a series of crlf that matched the size of the fread buffer. Increased the byte length for the buffer and the problem no longer exists.
In short, if your fread buffer streaming the image is completely full of carriage returns and line feeds, the data gets truncated. This possibly also relates to the post from Collin Krawll as to why image optimization resolved that problem.
I have a HTML canvas (using KineticJS, however canvas aficionados should still chime in) that loads an image from another domain, places it onto the canvas and overlays some other information to product a final image. When I try to use canvas.toDataURL () to output the file, I receive the message "The operation is insecure.", obviously due to cross-domain restrictions.
I was wondering if anyone knows of any methods to work around this error (preferably cross-browser compatible). I was thinking a solution would be to copy the canvas to another canvas, kind of like a screenshot, but I can't find any method of doing so in the way that would avoid the error as I think it copies all canvas properties along with it.
Does anyone have any ideas?
If the images are coming from a domain you don't control, then you're stuck with CORS limitations.
If you have access to configuring your own server, you can enable cross-origin sharing by setting this heading (read more about server security when doing this):
Access-Control-Allow-Origin: <origin> | *
Alternatively, if you host your images on a CORS enabled site like www.dropbox.com you can fetch images without the security errors like this:
var image1=new Image();
image1.onload=function(){
context.drawImage(image1,0,0);
}
image1.crossOrigin="anonymous";
image1.src="https://dl.dropboxusercontent.com/u/99999999/yourCORSenabledPic.jpg";
I'm using kinetic js to build an application using HTML5 canvas where users drag and drop images and then save the final image. It is giving the following error:
Unable to get data URL. SecurityError: DOM Exception 18
Please help.
It happens when the images drawn onto the canvas and the code are on different server. As quoted from the http://www.html5canvastutorials.com/kineticjs/html5-canvas-stage-data-url-with-kineticjs/:
"The toDataURL() method requires that any images drawn onto the canvas are hosted on a web server with the same domain as the code executing it. If this condition is not met, a SECURITY_ERR exception is thrown"
I'm working on a page where you will be able to draw images on a canvas. You have 6 options of images, and when you are done I want people to able to save their creation.
I'm using drawImage to draw the images on the canvas, but when I use the following code:
var canvas = document.getElementById("canvas");
window.open(canvas.toDataURL("image/png"));
It doesn't show the drawn images on the DataUrl images.
How can I make sure that the images that are drawn on the canvas are also visible in the image given by toDataURL?
What are the URLs of your page and the images you are drawing?
If your images are not coming from the same origin as the page, you will not be able to use toDataURL or any other methods to read the contents of the canvas; this is an intentional security feature. Check your JavaScript error console and you may see something like "DOM ERROR" or "SECURITY EXCEPTION".
What do I mean? I mean that if your page is at some URL (e.g., test.com, localhost:8080, file:///home/foo/) and the images you are drawing are located at URLs with different origins (google.com is a different origin from test.com, localhost:3000 is a different origin from localhost:8080, some browsers treat file:/// urls as if they are always from a different origin) then the browser will mark your canvas as unreadable once you draw the image to it.
Why is it this way? Pages can display images from other origins, but many other forms of cross-origin access are denied unless explicitly granted-- XMLHttpRequests, for example.
file URLs are treated differently as well because they are potentially more abusable. If you are using local files for the page and images, serve them with a trivial web server instead.
The first bullet in this section applies.