Saving canvas with 300dpi (imagemagick) and todataurl / base64

[marcialwushu]

I have a problem saving my canvas. I think that is because my canvas is too large. I have asked for help here:

Elements on the canvas disappear w/ jsfiddle

canvas.toDataURL() for large canvas

… but no success.

My problem is the next:

I have a canvas for example with these dimensions: 1123x1965 pixels and I need to resize to 29.7x52 centimeters and put them in 300dpi.

My rational was as follows:

After the edited template, convert to full size and then save a png image to the actual size in pixels, already multiplied by 300 dpi. Made this calculation:
29.7 centimeters: 29.7*300 = 8910

52 centimeters: 52*300 = 15600

The problem on using this is basically canvas disappear. Please look this: Elements on the canvas disappear w/ jsfiddle

And todataurl function don’t work: canvas.toDataURL() for large canvas

• Then use the library imagemagick convert to 300 dpi, like this command: convert test.png -units

PixelsPerCentimeter -density 300 test2.png
Anyone can help me?

Thank You.

[marcialwushu]

DPI means dots per inch, not dots per centimeter. 300 DPI(dot/in) = 118 dpcm (dot/cm)

The calculations should be:

29.7 centimeters: 29.7*118 = 3504.6

52 centimeters: 52*118 = 6136

I hope this helps solving your problem. (I cannot give comments, yet. So I put this as an answer)

[marcialwushu]

Help? canvas.toDataURL('image/jpeg') at 300dpi instead of 72?
Solved
Hi all, I have a specific use-case where users will be creating a canvas, but then need to be able to download a .jpg @300dpi (to be printed).

I have already setup the canvas at 1800px × 1200px (4x6 @ 300dpi) and am using to have them download it, but when they try to print, it is monstrously huge because it is scaled @72dpi instead of @300dpi.

Can anyone come up with a way to specify the dpi of the image when creating the DataURL or when downloading that doesn't involve PHP?

[marcialwushu]

Sorry, another friend just found this package for me, and it's working perfectly: changeDPI

https://github.com/shutterstock/changeDPI

[marcialwushu]

changeDPI

changeDPI provides 2 utility functions that can change the dpi of canvas-generated image, of either dataUrl or blob formats. The functions separate the header from the image data, convert and manipulate just the header, then sticks the header back on the file. In this way, very large images can be converted quickly without having to convert the entire contents of an image file. This process is non-destructive—image data does not get modified in the process.

Install

This project depends on node and npm.

npm install --save changedpi

Usage

From a canvas element dataUrl:

// create the dataUrl at standard 72dpi
var dataUrl = canvas.toDataURL('image/jpeg', 0.92);
var daurl150dpi = changeDpiDataUrl(dataUrl, 150);

From a canvas element blob:

// create the blob at standard 72dpi
canvas.toBlob(function(blob) {
  changeDpiBlob(blob, 300).then(function(blob){
    // use your changed blob
  })
},'image/jpeg', 0.92);

  TODO add example with file reader.

ES6

This module uses ES6. To see a compiled ES5 version, run npm run build and look in dist/.

Testing

npm install .
npm run test

Contribute

Please do contribute! Open an issue or submit a pull request.

The project falls under @Shutterstock's Code of Conduct.

License

MIT.

[marcialwushu]

https://www.reddit.com/r/web_design/comments/aia3nz/help_canvastodataurlimagejpeg_at_300dpi_instead/

https://stackoverflow.com/questions/16672851/saving-canvas-with-300dpi-imagemagick-and-todataurl-base64

[marcialwushu]

Add dpi/scale options for custom resolution

Feature: Custom resolution with DPI/scale options

Implementation

When a custom scale is set, the canvas' width/height are multiplied by that scale while keeping its CSS width/height at the original. Then ctx.scale is used to scale all future canvas actions (see here for more info).

The option {dpi: 96} is equivalent to {scale: 1}, and larger values of either option will increase the resolution. If both options are present, scale is ignored in favour of dpi.

Here's some example usage:

// Create a canvas with double-resolution.
html2canvas(element, {
    scale: 2,
    onrendered: myRenderFunction
});
// Create a canvas with 144 dpi (1.5x resolution).
html2canvas(element, {
    dpi: 144,
    onrendered: myRenderFunction
});

[marcialwushu]

niklasvh/html2canvas#1087

[matteogara]

@marcialwushu this is great! thank you for posting this solution, it works like a charm