I am using fabric js for my web application. For saving HTML5 canvas as image using fabric js, I found the following code which works in chrome and firefox browser. But when i run th same code in microsoft edge, the browser just opens a blank new window without any image on it.
$(".save").click(function () {
canvas.deactivateAll().renderAll();
window.open(canvas.toDataURL('png'));
});
However I also tested many fiddle projects which shows how to convert canvas to an image. Those fiddles works on chrome but not in edge. An example fiddle is here
If you will use FileSaver.js it will download on Edge. For using FileSaver.js you need to convert base64 data into the blob data. To do that, please check this post on StackOverflow
Here is an updated fiddle
You need to include FileSaver.js into your project, and your save button will have the following code:
$("#canvas2png").click(function(){
canvas.isDrawingMode = false;
if(!window.localStorage){alert("This function is not supported by your browser."); return;}
var blob = new Blob([b64toBlob(canvas.toDataURL('png').replace(/^data:image\/(png|jpg);base64,/, ""),"image/png")], {type: "image/png"});
saveAs(blob, "testfile1.png");
});
Alternative, quick and dirt solution is to write html data into new tab, and right click on the image and save it. This solution is not required any plugins or libraries.
Your save will simply change to:
$("#canvas2png").click(function(){
canvas.isDrawingMode = false;
if(!window.localStorage){alert("This function is not supported by your browser."); return;}
var html="<img src='"+canvas.toDataURL()+"' alt='canvas image'/>";
var newTab=window.open();
newTab.document.write(html);
});
Check the modified fiddle:
http://jsfiddle.net/9hrcp/164/
document.getElementById('test').src = canvas.toDataURL('image/png');
i added an image tag and and set the src attribute to the dataUrl to the image and it loads fine.
So edge is generating a correct png, is refusing to load it as a dataUrl redirect. May be a feature and not a bug.
Related
I face problems with my HTML5 App for decoding barcodes with JavaScript. For testing reasons I run the implemented algorithms against a database with 1055 pictures (Muenster BarcodeDB with a resolution of 600x800px). It works fine in Chrome on Windows and Safari on iPad 2. But Chrome on my Moto G (Android) crashes after 20-30 pictures without any message. When I use HTML5 Media Capture with camera photos it also crashes after taking several pictures and Chrome reports, that there isn't enough memory for the previous operation. It crashes directly, when the picture was taken and the camera app is closed. Then the browser is shown again with a reaload of the page.
Did anyone face the same problems? Below is some code on how to use the pictures.
HTML Media Capture Input:
<input id="upload" type="file" accept="image/*" capture style="display:none;">
JavaScript Handler (exif.js, megapixImg.js for rotating/scaling image):
fileInput.onchange = function () {
var file = fileInput.files[0];
imgOrientation = null;
// get orientation of image from exif data
EXIF.getData(file, function () {
imgOrientation = EXIF.getTag(this, "Orientation");
});
// MegaPixImage constructor accepts File/Blob object.
megapixImg = new MegaPixImage(file);
// Render resized image into image element using quality option.
// Quality option is valid when rendering into image element.
megapixImg.render(tempImg, { maxWidth: maxDimension, maxHeight: maxDimension, quality: 1.0 });
};
tempImg.onload = function () {
// Render resized image into canvas element.
megapixImg.render(tempCanvas, { maxWidth: maxDimension, maxHeight: maxDimension, orientation: imgOrientation });
// TRIGGER ALGORITHM
};
For your HTML5 media capture problem, you are likely running into the following bug:
https://code.google.com/p/android/issues/detail?id=53088
Unfortunately, the android developers have marked the issue as obsolete, which it is not. A few potential workarounds are discussed in the aforementioned thread, but none of them really suit my needs. Maybe you will have better luck. :)
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 am currently working on a PHP/HTML/Javascript project and I am trying to automatically copy text to the user clipboard when they press a button.
I've done some research and found that this can be done easily in IE, but every other browser doesn't support this, so instead a flash file is embedded which does the copying. Howver, this doesn't seem to be working.
Below is the code that does the copying
function copyToClipboard()
{
//Copy to clipbord if IE
if (window.clipboardData && clipboardData.setData)
{
window.clipboardData.setData('text', 'I am copied');
}
else //other browsers
{
alert("other browser");
var flashcopier = 'flashcopier';
if(!document.getElementById(flashcopier)) {
var divholder = document.createElement('div');
divholder.id = flashcopier;
document.body.appendChild(divholder);
}
document.getElementById(flashcopier).innerHTML = '';
var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+encodeURIComponent('other browser copied')+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
document.getElementById(flashcopier).innerHTML = divinfo;
}
}
It appears to be working fine when using IE, but when using Chrome, nothing gets copied to the clipboard. There aren't any errors either in the chrome development tools.
I know the flash file is embedded OK using the above code as, if I change the src to say clipboard.swf_rubbish then the chrome development console says its can't find the file.
Thanks for any help you can provide.
That solution no longer works with the release of Flash Player 10. Because of security restrictions on accessing clipboard data. You can find a workaround here
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');
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