I know I can save a canvas to PNG file easily with modern browsers. As it's a standard way for a browser to save canvas graphics as PNG, JPEG or BMP, I suppose it should work really good. I wonder how I'd save some canvas graphics to print it later? I mean if I use standard methods, I will get the image that is the same in size as source canvas and with a low-res 72 dpi or something like that. Should I make the canvas larger, then save a large image, and then convert it to 300dpi for print? Did anybody of you try to use it for print? I know I can use some pdf generator library but want to try standard ways first.
Yes, make the canvas larger and save a large image.
HTML5 canvases have no sense of DPI — one pixel on the canvas equals one pixel on your screen. The quality of the print depends on what you're printing (aliased vs anti-aliased graphics) and type of printer (ink jet, laser).
If you wanted 300 DPI exactly, use something like a screen ruler and measure the DPI of your monitor (say, 72 DPI), divide 300 by that (equalling, say, 4.1) and make the canvas that many times bigger.
Alternatively you could think about using SVG and drawing graphics with vectors. Then you'd effectively have infinite DPI. (Think of Adobe Illustrator vs. Photoshop.)
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 6 months ago.
Improve this question
I was wondering if I should switch my JPG and PNG images to SVG, because I believe that using SVG images, my page will load faster, am I sure about that? Is it better to use images in SVG format?
And is there a possibility to convert JPG/PNG to SVG?
These are different tools for different jobs.
SVG is for vector images. Rectangles, lines, ellipses, and all the things you can compose together from primitive objects. Vector images can scale to most any size and still look decent, because they're not made of pixels. They're a set of instructions for what to draw on the screen.
PNG is for raster images. A grid of pixels that represent the image. These cannot be scaled without loss of quality, as naturally all you can do is make the pixels bigger, or resample the image which gives it various levels of fuzziness in quality. PNG is great for when you need an alpha channel, need lossless quality of image, or have a lot of solid colors side-by-side, such as the case with computer screenshots.
JPEG is for photos, also raster images. It's lossy and designed to take advantage of how human vision works to reduce file sizes for images of the real world.
You wouldn't use a JPEG for a vector logo... you'd use SVG. You wouldn't use a JPEG for a screenshot. You couldn't use an SVG for a screenshot, as it's a raster image.
SVG is a great format for vector graphics. The big advantage is it's sharpness and quality in all sizes / resolution / pixel densities. If you've got some JPG or PNG images that are exported from vector source file (*.AI, *.EPS, *.PDF etc.), I'd consider saving them directly to SVG (e. g. icons or simple shapes graphics). If you don't have a source file, you can try to vectorize it.
However, there is no significant difference in performance. In all these formats you can have both small / optimized images and very large / slowly loading images. If you care about loading times of raster images, you could try image optimizers like TinyPNG or JPEGmini.
SVG is better than the JPG/PNG, but if you don't have the image ready with svg, you would use it as a raw format.
Here are why SVG is better than raw format though.
PNGs can weigh in at large file sizes, usually when catering for HDPI displays. As you know, the larger the file size, the slower it is to render/load.
SVG is also good for Accessibility and SEO. Google index’s SVGs, which is good news. SVG content whether it is in a standalone file or embedded directly in HTML is indexed.
I'm trying to design a poster using HTML, currently CSS allows me to get a huge canvas (90cmx200cm), but I can't get a document to send for printing.
Chromium does not allow using custom paper size and Firefox let me use the required size (on non-standard inches) but fails miserably to render a high quality PDF (Even 20px text that looks good when browsing w/o zoom).
I was thinking that I should be able to get a lower level interaction with the renderer to get this done.
The output format is irrelevant as long as it's portable enough.
Is there a way to achieve this?
There are a few things you need to know. Firstly print quality is related to dots-per-inch. Best software and printer in the world isn't going to make a 100 x 100 pixels photo print quality.
http://www.vsellis.com/understanding-dpi-resolution-and-print-vs-web-images/
Images on web pages are rasterized images, and typically quite low resolution (compressed formats such as JPEG and PNG to reduce bandwidth use). You might try using high-resolution images and scaling them with CSS (I have not idea how this will print though).
Make sure all of your text is actually text (don't use images).
To improve quality ensure images are high resolution. If possible you could explore using SVG, which is a loss-less format for diagrams and line drawings. I believe this should be preserved if you print to PDF. There are also third party libraries that convert SVG to PDF.
I"m developing a diagramming application in HTML5/JavaScript. All drawing is done with SVG, using Raphael or qooxdoo SVG (not settled yet). The drawing area should use custom background image. The image is too big to be downloaded (several megabytes for 2560x1600 Retina resolution), that's why I construct it on the fly, composing it from tiles and applying bitmap effects. For that, I use HTML5 canvas. After that, the resulting background image has to be made accessible from SVG. To achieve that, I export a data URI from the canvas, and use <image xlink:href="data:image/png;base64,..."/> inside SVG.
This works for simple examples, but I'm a bit concerned about memory usage in production. Given that the image takes 12MB in memory (2560 * 1600 *3 bytes ber pixel), how much additional memory will be used? I suppose that at least some megabytes will be allocated to store base64-encoded PNG-compressed representation as data URI, and another 12 megabytes will go to the buffer for the SVG <image> element.
I wonder if there is a method to short-circuit this and to avoid redundant image encoding-decoding?
You can go around the base64 part with canvas.toBlob(callback) and window.URL.createObjectURL(). Other than that I don't think there is a place for you to further limit memory usage.
https://developer.mozilla.org/en-US/docs/Web/API/window.URL.createObjectURL
The toBlob() method can be shimmed on some browsers: https://github.com/blueimp/JavaScript-Canvas-to-Blob
I wrote a Flash Builder project in AS3. It uses some images to tell the user that it is busy with something.
In the first place I wanted to use the SVG file format for these images to keep it crisp as possible. But it doesn't work, errors in shapes or not on the right position.
So I decide to use the PNG format. It is working nicely except for one thing: DPI translations done by the compiler. I cannot center the image because the DPI size is recalculated to the size of the screen's DPI and can be different on devices. This is very complicated to me because I only want to center the image.
The images has 96DPI, The Capabilities object returns a screenDPI of 165. Because width and height doesn't change when DPI changes (object returns same width and height), I cannot see what the REAL size is of the image in pixels (the size the user see).
In this example, the visual size of the bitmap increases and doesn't fit on screen.
This makes it very complicated to use images in the project.
The documention on the Adobe site notice about bitmap DPI. And also that the screenDPI could be reported wrong by the OS. The only solution to this, is to include images that matches the screen dpi for every device with a different DPI. Wow, that is very complicated stuf, you can read it here:
http://help.adobe.com/en_US/flex/mobileapps/WS19f279b149e7481c682e5a9412cf5976c17-8000.html
Within flex you can set the target DPI (Applications DPI) but how can i do this in an AS3 project? You cannot change it at run-time so how can i do this? In the XML file, i didn't find an option about the application it's initial DPI.
The images are 96 DPI, so when I set the application's DPI to 96 either, iI assume it will be displayed OK? But how do I do this?
Other solutions also very welcome.
Thank you for your time, if you got a question let me know.
I am generating a PDF from HTML using a library, and all the size parameters that I am giving are in pixels. This seems kind of odd. I just googled the internet for A4 size in pixels, and can I just use these values everywhere?
Is this how it should be done? Will the generated PDF look correctly?
Otherwise, do I need to somehow compute the pixel size using information from the screen?
Then, how do PDF's work if they can be sent to others and still look comparatively the same?
PDF internally uses the same graphics model as PostScript. PDF is derived from PostScript. Basically,...
...it uses the very same operators that are available in PostScript, but renames them from being long and fully readable to short 1-, 2- or 3-letter abbreviations;
...however, it strips all features that make PostScript a full-blown programming language;
...and it adds a few new graphics capabilities, such as tranparencies and direct TrueType fonts embedding.
PDF also uses the same basic measurement unit as PostScript: 72 points == 1 inch. You may also use fractions of points. This is the device independent way of stating dimensions.
If you ever use pixels, you can do so. If you do, the absolute size of a graphic object on the display or the printed paper then depends on the current resolution of the display or printer. A square of 72px x 72px is 1inch x 1inch at a 72dpi resolution, but it is 0.1inch x 0.1inch at a 720dpi resolution. Therefore using pixels is a device dependent way of stating dimensions.
A4 dimensions are 'width x height = 595 x 842 pt'.
PDF's inherently a print medium, and its internal coordinates work in terms of 'points' (72pts per inch). The PDF rendering software (Acrobat, FoxIt, Ghostscript, etc...) will query the output device for its DPI rating and internally convert all the point-basec coordinates into device-specific pixel sizes when it comes time to render the PDF for display/print.
You can specify sizes in pixels while building a PDF, certainly. But remember that pixel sizes differ. A 300x300 pixel image will be 1" x 1" square on a 300dpi printer, but 3" by 3" on a 100 dpi monitor.
I sometimes edit my files in GIMP, when I want to edit my pictures and such. When I export for PDF it depends on the quality I need.
I just use this chart (for A4):