Change DPI of canvas element in HTML5 - javascript

I'm looking to create a chrome application that allows the user to design a few different things using the canvas element. After they're done, I'd like to use a mask to crop out everything outside a specified area and then send the image to a printer. However, I need to be able to control the printed size precisely.
When I was making a similar app in python, it was a simple matter of setting the DPI to a ratio of the resolution to the dimensions I needed. I'm trying to find if there's a solution as simple as this one for HTML5.
I've found a couple posts asking for similar things, but they're unanswered and don't have a lot of activity.
Any help would be appreciated!

Canvas is a bitmap (raster) format. You can not just increase the DPI without some horrible artifacts appearing.
You can however record all the drawing, strokes/fills etc, and then at print time create a larger canvas for print and scale up all the drawing commands to fit the higher resolution canvas. As long as you don't use bitmapped images or direct pixel manipulation the results will be good. Though large canvas formats can be problematic on some devices and browsers. A better way is to convert it all to a vector format like SVG and print that. Or skip the canvas altogether and draw to SVG.

Related

What are maximum dimensions of Three.js render canvas?

When I set render canvas size to ~4000x4000px it's ok, however starting from around 4000 (tested 5k, 6k, 8k) it seems that scene is "cut off" in some way. See image below:
So up to ~4k content is properly rendered in the center of canvas and for higher canvas sizes it cuts the content.
Is it a Three.js/WebGL limitation?
If yes then what are actual maximum canvas dimensions that don't cause any "deformations"?
Is there anything I can do about it? I need to get canvas snapshot in high resolution (8k).
Is there anything I can do about it? I need to get canvas snapshot in high resolution (8k).
You can render portions of the scene using Camera.setViewOffset and then assemble the parts into a large image. You can look at this sample where it renders the image in 4 separate parts. In that example it makes 4 renderers but for your case you'd only need one and just render->capture canvas->render->capture canvas-> repeat until you get all parts. Then you need a way to stitch those parts together. You could use gIMP or Photoshop for example.
Here's library that does this
https://greggman.github.io/dekapng/
I know there is an answer here I wrote that shows how to do this in three.js since I wrote that library because of my answer. Unfortunately 10 minutes of searching didn't bring up >:(
This is not a limitation of three.js but a limitation of the maximum size of the drawing buffer. It's defined by the browser vendor and can't be exceeded by an application. More information in this github issue:
https://github.com/mrdoob/three.js/issues/5194

How much does image size affect CSS rendering / painting performance?

I'm working on JS / HTML game, where all objects are HTML elements (mostly <img>). Their top and left CSS attributes (sometimes along with others, like margins, transformations etc) are dynamically modified by JS code (every frame, basically). I noticed a huge performance improvement, when I switched from using .png files to .gif (22 fps -> 35 fps), but still:
Can further reduction of files' size (by 10-30%) actually noticeably improve CSS transformation performance? I would just test it, but I'm talking about ~250 gif files; and I don't want to loose too much quality, too.
Reduction of the the amount of data(=file size) which will have to be processed, will normally have a positive performance impact, but how much impact it will have has always to be tested and measured, as it depends always on how well your code works together with all surrounding frameworks, the browser and even how the underlying hardware does calculations.
In a worst case where you have to create a lot of resizing an recalulate new pixels, especially if you have to increase the display size of your image again, you might even create a loss in performance.
There is no absolute answer to how good or bad your change will be, until you have tested and measured it in your system yourself.
About Reducing GIF File Size:
A positive factor here is when you cut the width and height of the image by half, the actual file size can be reduced by around 75%.
When using GIF images, reducing the number of different colors used in the GIF image will reduce the size as well. Often you can select the number of colors when exporting gifs from image editor tools. In Photoshop you have an option "Export for Web" which will try to set the optimal settings for usage in web pages.
Regarding Game Performance and Images:
If you already know how you will resize the images(fixed sizes like +50% and +100%), using CSS Image Sprites with pre-resized images can create a good improvement, as you won't have to resize the image, but just use an existing part of the sprite sheet. This will reduce the amount of processing for image manipulation, and therefore increase the performance.
If you want all at once, performance, quality and small file size, the best way to go is replacing as much raster graphics with vector graphics as possible. Most of modern 2D Games use a lot of vector graphics.
Vector graphics are easier to resize, as only the splines have to be recalculated and filled, resizing raster graphics causes calculation for each new pixel.
All common modern browsers support the svg format and can be sized through css. If you want try it out, a free open source tool to create vector graphics is InkScape.
Hope this helps.
Why don't you use JPEG? It's compact. Yes, Image sizes affect performance.
Also, check "CSS Image Sprites", You can have a single image with all your possible icons/images and can handle view using CSS. You'll get better performance as you'll be loading a single image.

Antialiasing text on canvas

I have to create .pngs for a lot of clients that are printed by an industrial inkjet (ads on back of a children's magazines).
Unfortunately, all browsers seem to switch on antialiasing - no matter what I try. Neither CSS nor ctx.mozImageSmoothingEnabled=false; seem to work.
Does anyone have any idea to get text displayed on canvas WITHOUT any grey-scaled pixels trying to make the font sharper?
The canvas will anti-alias everything drawn to it, with the exception of images when imageSmoothingEnabled is set to false (and then only for resampling purposes).
There are various options though -
SVG
Using SVG would be ideal as it is vectors and can be easily converted to postscript. If the printer supports postscript it will rasterize the vectors into the optimal raster-mask and make sharp edges.
Large bitmap
You can reduce the effect of anti-aliasing by using a very large bitmap, but from my own experience, and probably yours as well, it won't eliminate the gray points.
There is also the risk of meeting the limitation of canvas element itself which in some browsers is limited to 6k. Depending on the printer's DPI this may or may not be enough.
A combination of a large bitmap and threshold (see below) can perhaps get you around this though.
The Deep Dive implementation
Another way, but more advanced, to get around this is to load the font manually and draw the paths of it using Bresenham or similar algorithm. An additional aspect is that you would need to use polygon fill-algorithms as well (ie. even-odd or non-zero winding).
All this is doable without too much effort:
To load fonts and get the path data you can use f.ex. opentype.js
Use Bresenham or EFLA for rendering vectors to lines (if needed)
Use a polygon fill algorithm even-odd or non-zero winding to fill the polygons (you may get away with normal canvas fill if you can cover the edges with the Bresenham/EFLA lines).
As you are in print industry Open-Type may not be sufficient as Adobe fonts are more common from the typical repository. You can probably get the path data via other means or find the equivalent in an Open Type version or even a SVG font type.
Threshold
Another approach is to quantize the gray-levels. You can iterate over the bitmap and use a threshold value to set the pixel either transparent or solid color.
The result may not be so good as you will end up with some sharp transitions around some edges. You may however be able to reduce these artifacts depending on the print-resolution as well as the chosen threshold value.

How to scale image with same quality using jquery?

I am having sequence of images in HTML. All are large size images, I am scaling theme in initial display and on click all enlarge.
So the issue is, when image is scaled down, it shows pixelated output. (See link)
If anyone have solution to have consistent output when image is scaled, please give suggestions.
I think you have to scale them not dynamically in the browser. Create thumbnails on serverside by using libs like imagick or gd.
The quality of an image scaled down by the browser will depend on the image scaler used by the browser. Most of these have no method of resampling, and simply remove pixels from the image to reduce its size - hence the pixellated look.
There is nothing you can do about this, other than to use separate images for the small and large versions.
As floating concept is there the resolution varies differently in system.So its better to use good quality image.
Check this link http://codecanyon.net/item/imageresize/59935
If it is useful for you tell me I can send you the code.

JavaScript and draggable images - can I optimise it?

I'm working on a web application where we have a very large image (4000 * 2000 pixels) that can be dragged about the place, zoomed in/out.
When the image isn't zoomed in or out, it can be dragged about very fast and it looks great. As soon as i change the size of the image by some factor, the dragging becomes dreadfully slow.
I have just noticed that I have a height attribute on the image, but don't have a width attribute.
This behaviour is similar in both IE and Firefox, for obvious reasons, it works slightly faster in FireFox.
I have been looking at the GoogleMaps where they also have a very smooth draggable images.
What sort of optimisation I can do to achieve a similar result?
Thank you
Google Maps relies on lots of small, tiled images, as opposed to one large image. That way, they can be loaded in and out of memory, as you move around.
The simplest way to optimise the image would be to slice it up.
If you want to offer multiple levels of zoom, you may also want to consider rendering images at different levels as well, rather than relying on the browser to image process at run time.
Additionally, look at the image format you use! GIF and PNG offer compressed file-sizes over images such as JPEG and TIFF (although, obviously quality does take a hit).

Categories