Draw Image on Canvas and export print quality image

Question

What I am Doing:

I am using Fabric.js to develop a canvas application. Users can place image or texts in the canvas

What I want to Do:

When the user downloads the image,the user should be able to print it. Currently I am working on length: 5 X 8 (inches). In Fabric.js, toDataURL() function by default will give 72 DPI image and I am planning on using PHP to convert it into 300dpi image.

So to create a high quality image of 5X8 with 300dpi, the image should be 1500px X 2400px. But I cant give that much of space for the user since it wont be very intuitive.

So, I did what was suggested in the below link

What is the best practice to export canvas with high quality images?

Problem:

But I am facing a trouble. When the user places a text or image ,it appears very small.When I click on a text or image, the corners and borders are barely visible. It considers the relative size of the canvas. Please see the Fiddle

AndreaBogazzi · Accepted Answer · 2016-04-11T18:47:30.363

7

You should not style canvas directly with dimensions. Set the canvas attribute width and height, without exceeding the screen dimensions:

<canvas width="500" height="400" ></canvas>

When exporting to image use

canvas.toDataURL({multiplier: 4});

This will give you a canvas 4 times bigger the one on the screen.

Styling the canvas with the style to reduce its diemension and having a bigger image with dataURL will make the overall experience worse.

The style squeeze the canvas to your eyes with something that fabricjs is not ready to understand. So you will not get normal sized controls.

//remove those
width:400px !important;
height:600px !important;

http://jsfiddle.net/Q3TMA/1043/

edited Apr 11 '16 at 18:47

answered Apr 11 '16 at 11:34

AndreaBogazzi

14,323
3
38
63

But that wont be so easy for the users to use..imagine a 1500px X 2400px lengths? – Abhinav Apr 11 '16 at 11:41
set the canvas with the right dimension with 1 on 1 pixel on screen, the output for printing with the size you prefer on your backend. – AndreaBogazzi Apr 11 '16 at 13:08
Cudn follow you...can u give some example? – Abhinav Apr 11 '16 at 13:11
Tried to improve answer. – AndreaBogazzi Apr 11 '16 at 18:47
I didn't know FabricJS has the useful `multiplier` property -- thanks for the info! :-) – markE Apr 11 '16 at 21:26
@AndreaBogazzi: thanx for the suggestion..it partially worked, but while scaling, part of image is being cropped,any ideas? – Abhinav Apr 12 '16 at 06:50
it should not. post a fiddle, there is some error elsewhere. – AndreaBogazzi Apr 12 '16 at 11:57
@AndreaBogazzi: Image is not getting downloaded with multipler property. It gives network error.Pls check this question http://stackoverflow.com/questions/37135417/download-canvas-as-png-in-fabric-js-giving-network-error – Abhinav May 10 '16 at 10:23

Draw Image on Canvas and export print quality image

1 Answers1

Linked