I'm using fabric.js to make a draw and export the canvas to a .png without background. The thing is that I've been searching and this is the only thing that, in a way, makes sense to me:
document.getElementById("downloadbtn").onclick = saveImage();
function saveImage(c) {
this.href = canvas.toDataURL({
format: 'png',
quality: 0.8
});
this.download = 'testimage.png'
}
But it doesn't work... I've also tried a bunch of different stuff but the same thing happens:
Failed to execute toDataURL... error in the console.
Any helps? Ty
For those who had the same issue as me, the thing is:
You can save easily the canvas to an image, but you can't do it if you have an image inside the canvas, let me explain. If you have imported a nonlocal image into the canvas (like pasting an image with fromURL), the CORS of the web will detect this as a probable threat for the system, and will block the action.
For me, saving the canvas without the url image is fine, so I have no other solution for those who try to save the canvas with an external image, but maybe save first locally the image and then save it will work for you.
Hope it can help!
Related
I cant seem to get my drawimage function to work on my canvas. I tried using the onload method I tried using the file on the application. Nothing seems to work, however. All I want to do is print the image from the url into my canvas.
Change line 5 to let image = document.createElement("img");
When drawing images to a canvas you must provide an image element, created with document.createElement or stored in your index.html
I am simply trying to add a sprite to my scene normally. I am using this image: i.imgur.com/kMT4mOH.png
var map = THREE.ImageUtils.loadTexture('i.imgur.com/kMT4mOH.png');
var mat = new THREE.SpriteMaterial({map:map, color: 0xff5200, fog: true, blending: THREE.AdditiveBlending});
var glow = new THREE.Sprite(mat);
scene.add(glow);
However when I add color to the sprite, the entire image turns the color instead of just the white space.
Here is a jsfiddle: http://jsfiddle.net/VsWb9/2331/
Im not entirely sure what Im doing wrong and any help would be appreciated.
The image is not loading because the url to the image is i.imgur.com/kMT4mOH.png. So the page is searching for the file on locally. ie. http://fiddle.jshell.net/VsWb9/2331/show/i.imgur.com/kMT4mOH.png.
To get the file from its external location you would use http://i.imgur.com/kMT4mOH.png, but you then get the problem of cross domain restrictions on webgl textures, so this will also not work also.
I don't see any problem with your code so if you run it from a server where the texture image and the image file are both on the same server, it should work.
Read more about cross domain webgl images at: http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
There seems there may be a work around if you really need it to work in a jsfiddle, it is outlined on this other stackoverflow question: cross-domain image for three.js (canvas/webGL), proxy?
I came across this gifx.js - http://evanw.github.io/webgl-filter/ - which seems to work well except for one thing: the save button always generates a blank image. I have tried playing around with the source but do not understand why the data URI that is generated is always the same (and blank) rather than that of the canvas. This is the script that I've been trying to tinker with - http://evanw.github.io/webgl-filter/script.js. If anyone has any ideas, I would appreciate the help!
The WebGL context needs to be created with { preserveDrawingBuffer: true } in the options, otherwise the buffer being rendered is cleared once it is drawn to the screen, and toDataURL will give you a blank image.
See also:
How do you save an image from a Three.js canvas?
I am using HTML5 and javascript in a project. I am loading image from a Url(seleted by user) and then i am moving that image inside canvas. On moving i am redrawing the whole image. But on moving image is flickering. So i want to copy that file from URL to my working directory. So that flickering of image on moving would get stop.
Is there any other way to do this? if not then how can i copy that image file in my working follder(i.e. destination path).
Thanks a lot in advance.
This article will give you some good pointers to optimizing your canvas code. Make sure you take a good look at the section titled: Pre-render to an off-screen canvas.
You probably are facing crossdomain limitations when using images in canvas.
The image and the html document must reside on the same server/domain
otherwise you have to base64 encode the image as the image source.
I have an small drawing application made in processing.js. I would like to save the image made using the application to a server using a php file (no problem on this).
I know the canvas element has a method to get that content, canvas.toDataURL() but I dont know how to do the same with processing.js
Any hint?
Cheers!
perhaps
var image = document.getElementsByTagName("canvas")[0].toDataURL();
So when you use saveFrame() in processing.js. The image opens in a new window and i found it hard to intercept the data. The soultion is to get the image from the canvas in javascript.
// this grabs the canvas and turns it into a base64 image
var image = document.getElementsByTagName("canvas")[0].toDataURL();
// Log the data to the canvas to check it working
console.log(image);
// then you can place the image on your web page
document.getElementById("theImage").src=image;
Then the html is easy. Just add
<img id="theImage"></img>
If you want to upload the image to a server you can acsess the data in js with.
image
Note that you can also use style display:none; and have the canvas render image for you without the canvas displaying. It also supports transparent pngs and the canvas by default is transparent