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"
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.
what I want to do is to save the image metadata, along with image data, after saving the image using canvas.toDataUrl('image/jpeg') so that next time when I load the image, I should have access to that metadata.
consider the image bellow, here I am drawing the objects in canvas, on mouse over it a tooltip is shown with some data. I am trying to figure out a way through which the metadata can be saved along with the image, when the image is loaded again tooltip should work same as earlier.
while searching for the solution I found that EXIF is used to save metadata to image, but found no direct solution for it most of the solution are using exiftool or any other third party tools/library.
to save the metadata to the image, found not options from front-end, had to do it from back-end (I used node.js). For that I had to make use of the node-exiftool, required installation of exiftool.
bellow are steps for adding the metadata to image:
upload the image and send the metadata to server.
using node-exiftool's .writeMetadata() method write the metadata to the image.
this is done for writing part.
similarly for reading we can make use of the node-exiftool's .readMetadata() method.
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 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.
I've got an HTML5 Canvas. I .toDataURI it and send that off to PHP with AJAX. PHP stores that in a database.
Then I have a different page that has an img element to request that data from the database and render it. But it... won't. The data's getting through, I can see it with the browser's view source function:
<img id="embedded" src="data:image/png;base64,iVBORw...5CYII=" />
(ellipsis added)
It's not being truncated or anything stupid like that, I have document.write's and echo's in every script from where the data is generated by the canvas to where it's embedded into the final element, and it's getting through completely intact.
I've tried it with image URIs generated by other sources and there's no problem. I've tested this in Chrome 12 and Firefox 5, behavior was identical in both.
A final oddity is that when the canvas is totally blank, the image data it generates IS displayed: I get a blank image with the same dimensions as the original canvas. But as soon as I draw anything on it, nothing. Just the familiar little error-loading-image icon.
This is my code for the receiving end:
http://pastebin.com/Hw1ykd1i
And for the sending end:
http://pastebin.com/hwsEfsaD
If I've fully understood your problem - you're saying the receiver isn't working (i.e. the thing that mirrors out the output).
You need to encode your data:
function postToServer(data) {
data = "data=" + encodeURIComponent(data);
// continue with XHR POST
This works with the blank canvas because it's made up of letters without any symbols. As soon as you draw, the canvas base64 value has characters such as + in it, which in POST language means space. So if you encodeURIComponent your value, those symbols will get sent intact to your server, and the receiver thingy should be able to render the output correctly.