How can I print a html5 canvas element that has some content drawn on it using javascript? My print preview shows a blank box instead of the contents in the canvas element?
You will have to save the contents of the canvas in an image tag, you will be able to print the image.
Related
I am facing this problem for a long time. I am generating the flipbook from the canvas using Fabricjs. I am changing the text content color and fonts on the fly. Everything is working fine but when I am trying to use google fonts so in that case text shows blurred and ugly.
Once the image is generated from JSON using canvas and converted the canvas to blob type of images and then I am converting HTML to flipbook.
Sample code Demo
<script async src="//jsfiddle.net/kantsverma/6yanokf1/5/embed/"></script>
Are you stretching the canvas. ie setting a canvas width of 500px then using css to make width 100%. this effectively renders at the lower resolution then stretches the final rendered image.
I am generating a PDF using TCPDF and feeding the resulting base64 stream to pdf.js for printing. The display output appears as expected, but when I preview or print the document, some unexpected scaling takes place.
In TCPDF, I am importing an existing PDF and overlaying that with data that is generated on the fly. The imported PDF in the print output is being scaled to about 25% of the page while the dynamic data appears to be scaled properly.
Display output - http://i.stack.imgur.com/PPQPt.png
Print output - http://i.stack.imgur.com/Go1Wy.png
This happens in Safari and Chrome, but in Firefox the print output is rendered correctly.
Any advice on how to get Safari and Chrome to cooperate?
I'm working on a toy JS project to apply filters to an image.
If I do the following:
add an image to a page via FileReader and Drag and Drop
apply said image to a maximum height/width of 500px canvas element via drawImage
apply changes to said canvas via putImageData
save the canvas via Canvas2Image
will the saved image be the size of the canvas element or the original image dimensions?
The mage you create from canvas will always be at the size of the canvas. The canvas does not know what you draw into it so the original size of the image does not matter.
I don't know what Canvas2Image will do to the resulting image, but you can simply extract the canvas as an image using:
var dataUri = canvas.toDataURL('image/jpeg');
This will save the image at the size the canvas is at (I assume Canvas2Image will do the same where it can or simulate this approach for bmp formats etc.).
To prompt the user to save the dataUri as an image please see my earlier answer here.
In my application I have some images and I want to rotate them and then save the rotated images.
I have rotated the images successfully but I could not save them.
Is It possible in jQuery to save the images? Does anyone know how to do it?
If the image is a simple image on the page (an img tag) that you rotate using the CSS3 transform rotate property I don't think there's a way to save the image as a rotated image file. But you could save the value of the CSS rotate property and then use it the next time someone views the page.
If you need to save the rotated image as a file, I'd suggest that you use HTML Canvas to rotate the image and the save the content of the canvas to a file:
http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/
I make an application canvas. I load more image (png, gif) in canvas. When I click print on my browser (opera), the contents of the canvas tag does not print. With other browsers (FF, IE, Chrome), there is no problem. Why?
this answer from Capture HTML Canvas as gif/jpg/png/pdf? might be useful.
var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");
with the value in IMG you can write it out as a new Image like so:
document.write('<img src="'+img+'"/>');