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

by

The DPI doesn’t matter at all when dealing with images. Images are measured in pixels so this is what you need to adjust. You can safely disregard DPI as it has no sense in this context.

Scaling won’t help you here – remember you are working with a pixel device, not vectors, so the canvas need to be already in the size you want to use for print etc. or you will have reduced quality due to interpolation when scaling it.

Here’s how:

You need to pre-calulate your canvas size in pixels in relation to what size you want in the final stage.

Lets say you want to print a 15 x 10 cm image (or about 6 x 4 inches) @ 300DPI output. You then calculate the pixels:

Width : 10 cm * 300 / 2.54 = 1181 pixels
Height: 15 cm * 300 / 2.54 = 1772 pixels

For inches simply multiply with the DPI (4 in != 10 cm so a little different result, numbers picked for simplicity):

Width : 4 in * 300 = 1200 pixels
Height: 6 in * 300 = 1800 pixels

For your image at 26.45 cm @ 300 DPI the canvas would need to be:

26.45 cm * 300 DPI / 2.54 inches = 3124 pixels.

To display that canvas in a smaller area on screen you use CSS to display the element, for example – 

<canvas width="3124" height="3124" style="width:600px;height:600px;"></canvas>

You can now draw to the canvas at its actual pixel position and it will show up scaled down on screen (but retain all information on the canvas itself). If you use mouse coordinates you just scale the mouse position proportionally (canvas pos = mouse coord * 3124px / 600px).

For zooming etc it becomes a tad more complicated, but the principle remains: the final size of your image must be that of the final result.

About DPI: if this image was 72 DPI or 300 DPI the numbers of pixels would be the exact same. The reason as already mentioned is that images are measured in pixels.

DPI is an arbitrary value when it comes to pixel devices (bitmaps, monitors, cameras etc.) and is only used for a DTP software to get a hint on dimension for final print which will use this information only to pre-scale the image in relation to the page you using to set the print with.

More Related Contents:

  1. How to save a PNG image server-side, from a base64 data URI
  2. Install Imagick for PHP and Apache on Windows
  3. Sending images from Canvas elements using Ajax and PHP $_FILES
  4. How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)
  5. How to install Imagick/imagemagick PHP extension on windows 7
  6. canvas.toDataURL() for large canvas
  7. How to use Imagick to merge and mask images?
  8. Get/set DPI with PHP GD/Imagick?
  9. How to stop PHP iMagick auto-rotating images based on EXIF ‘orientation’ data
  10. Running ImageMagick on XAMPP 1.8.3 with Windows 7
  11. What’s the maximum value for an int in PHP?
  12. PHP echo vs PHP short echo tags
  13. Yii2 htaccess – How to hide frontend/web and backend/web COMPLETELY
  14. How do I make a PHP form that submits to self?
  15. Class ‘MongoClient’ not found
  16. Laravel 5.3 multiple file uploads
  17. PHP + MySql + Stored Procedures, how do I get access an “out” value?
  18. Can’t decrypt using pgcrypto from AES-256-CBC but AES-128-CBC is OK
  19. How to bind SQL variables in PHP?
  20. Create new XML file and write data to it?
  21. MySQL ORDER BY IN()
  22. Do AJAX requests retain PHP Session info?
  23. Display message before redirect to other page
  24. Where does IIS 7.5 log errors?
  25. INSERT query produces “Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, boolean given”
  26. Best way to periodically execute a PHP script?
  27. .htaccess mod_rewrite > 500 Internal Server Error
  28. How do you create a .gz file using PHP?
  29. How to check if a value already exists to avoid duplicates?
  30. PhpStorm 2020.2 – PHP Built-in functions are not recognized

Leave a Comment