2

I have learnt that Canvas images in general have 96 dpi. Is it possible to change the dpi of the image data of Canvas. Can i say like convert the 96 dpi image to 200 dpi? Thanks in advance. I looked at this post Higher DPI graphics with HTML5 canvas but looks like this is upscaling.

Community
  • 1
  • 1
thegeek
  • 81
  • 2
  • 7
  • What are you actually trying to achieve? The real DPI is a physical constraint of the screen in most cases. – Quentin Sep 16 '15 at 12:47
  • 1
    I'm not sure if this is exactly what you're looking for, but it may help: http://www.html5rocks.com/en/tutorials/canvas/hidpi/ – Drew Gaynor Sep 16 '15 at 12:52
  • 1
    DPI is the question "how big is my pixel?". That is a property of your screen, or your printer. Images don't have a resolution, images have a certain number of pixels. DPI of a picture is purely a question of how big the pixels on the screen are. Now, you can zoom; like every pixel of your picture gets shown on 2x2 pixels of your screen. What exactly do you mean? – Emmanuel Delay Sep 16 '15 at 14:17
  • Create a second canvas with `document.createElement` and size it to 200/96 percent of the original canvas. Use the scaling version of `drawImage` to draw a scaled version of the original canvas onto the second canvas: `canv2Context.drawImage(canv1, 0,0, canv1.width,canv1.height, 0,0, canv1.width*200/96,canv1.height*200/96)`. Then get your imageData from the second canvas. – markE Sep 16 '15 at 16:32
  • @markE, this will just rescale/resample the image, it won't change its dpi, which, as said by Emmanuel is dependent of the screen or printer resolution. – Kaiido Sep 17 '15 at 00:01
  • @Kaiido Yes, It will increase the canvas pixel count for the same image by scaling -- that's what you want to do! If you increase the resolution (number of pixels) your image will have more pixels by the time it gets to the printer -- i.e, more Dots Per Inch. You can either use those extra dots to print a bigger image on the printer or you can print a smaller image with greater printed resolution. ;-) – markE Sep 17 '15 at 01:44
  • I don't want to do anything :-) But OP was requesting about dpi, which is irrelevant to canvas, since dpi only depends on the output medium's resolution (be it a screen or a printer). Of course your solution is the way to go to have a bigger image resolution, but it won't change the *non-existent* dpi of the canvas. – Kaiido Sep 17 '15 at 01:49
  • @Kaiido. You might be right. I saw the posted linked in the question deals with how to output a canvas at higher resolution (like to a printer). But the questioner really doesn't say why they want bigger "dots". Anyway, I'll leave my comment just in case they are referring to printed resolution. Thanks for the heads up! :-) – markE Sep 17 '15 at 01:56
  • Sorry for the delay in the response. I need to convert the image to a higher dpi just so i can process the image and use it my a webserver which mandates high dpi. That server does rest of the stuff like printing or displaying else where, i am not really concerned with that but it needs a higher dpi image as input. – thegeek Oct 14 '15 at 08:56
  • also @markE i have tried your example but there is an error canvas is tainted. I tried to rectify this by hosting the html in a web server but still no luck – thegeek Oct 16 '15 at 11:51
  • @thegeek. To avoid tainting the canvas with a cross-domain image, you must host the image on the same domain as your web page. Here's a helpful link on configuring your web server and web page: http://enable-cors.org/index.html. Also, cross-origin tainting is a well-discussed topic on Stackoverflow so you will find help by reviewing previous Q&A's. Cheers! – markE Oct 16 '15 at 14:44
  • Thanks for the inputs. However i think this is still upscaling the image but not changing the dpi part of it. I followed this link http://www.ehow.com/how_7556240_calculate-dpi-pixels.html and calculated the dpi and it still remains the same. my original image had 400 x 616 and after converting it is 834 X 1284. I used GIMP and calculated the height in inches which for the original image was 8.54 and hence dpi is 616/8.54 = 72 and for converted image 1284/17.8 = 72 – thegeek Oct 19 '15 at 13:40

0 Answers0