In order to answer this question properly I thought that I would:
Convert an in-document SVG file to a data URL
Load it into an <img>
Draw that <img> to a <canvas>
Convert that <canvas> to a PNG data URL
Load that data URL into an image.
I have an example of this attempt here:
http://phrogz.net/SVG/svg_to_png.xhtml
In Firefox I get (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage] when attempting to draw the image to the canvas in step 3.
Why do I get this error in Firefox, or how do I work around it?
In Chrome I get a SECURITY_ERR exception when I try to call toDataURL() in step 4.
Why would I get this error in Chrome, or how do I work around it?
The WhatWG specs state that the origin for an image "generated from a data: URL found in another Document or in a script" should be the same as that document. All data in this test is from the same document.
In Firefox, SVG images taint the canvas but we're working on removing that restriction in https://bugzilla.mozilla.org/show_bug.cgi?id=672013 when that bug lands what you're trying to do should be possible. This restriction has been removed in FFv12.
All browsers implement similar restrictions and all are working on removing them; generally by making what you can do in SVG images more restricted. For instance we don't want to get back to the bad old days of being able to work out what sites you've visited by creating an SVG image with links in it and then reading off the colour of the links using canvas.
In addition at the moment firefox requires that the svg element have width and height attributes in order to render to canvas. This restriction may be removed in future.
Edit by Phrogz: as noted in my comment above, I received independent confirmation that the security issue in Chrome is the same issue: Chrome (currently) always taints a canvas when an SVG document is drawn to it.
Related
Last year I found an old JS function by hMatoba from a previous question thread that allows client-side resizing of JPEGs before uploads. This is very useful when EXIF data is needed on the server-side, and when images larger than a certain size are not needed.
This worked very well until Chromium's switch to respecting EXIF image orientation, this library now creates images that cut off part of the image. See here for an example: https://imgur.com/a/JdYooXC. The library continues to work fine in IE (which is a bit useless in 2020...), but fails in Chrome and Edge (Chromium).
I feel like the issue is when the image object is created in the function and loaded with file data, there's a conflict between what the browser presents as "width" and "height" and what the EXIF data shows. Unfortunately, I can't figure out exactly where the fix needs to be implemented. Anyone care to help, or know if an alternative?
I'm running a Google Map which loads png images from server, stores them in an array and when needed, creates and shows animation of these images. As they are png images, I have issues with IE transparency support. I know about IEPNGFix.htc script, but I don't think it can be used in this situation. From what I've read it is only applicable to DOM elements. Is there a way to apply png transparency fix for these images?
Google doesn't help neither (although i would expect this to be a common problem). If you have any idea how to solve this, let me know.
You can call PNGFix on any element after it has been added to the page. See here:
http://pjdietz.com/jquery-plugins/pngfix/
You will need to hook into the event which is fired after the image has been displayed on the google map and then apply the pngfix to that new element.
I've seen a lot of people fighting with this matter, but I can't find a proper solution, nor one that fit my needs.
I'm doing some charts with Raphael, and I basically need to get them as PNG (for export, or later use in a PDF, and some other stuff). For Firefox, Chrome, IE 9, and any other browser with SVG support is easy. There are actually two ways to achieve it: using canvg to render the SVG into a canvas element and then obtain the image data; or sending the SVG to the server (C#) and using a library to rasterize it.
The problem is, of course, IE 8 and 7. In these browsers, Raphael outputs VML, and there is no way apparently of getting the SVG source. I couldn't find any VML rasterizer, so it lets me one only solution: to translate the VML to SVG, or to redraw the paper in SVG.
I checked the vectorconvert library por PHP, that actually uses XSLT transformations to translate VML to SVG, but I couldn't make it work (I've tried several tools to test the XSL but neither seem to work).
I tried to force Raphael to output SVG to a hidden div, by changing its properties .type, .svg, and .vml properly, but that didn't work either.
I think there might be a way to write the SVG tree into a hidden DIV while in IE; despite the fact it won't be shown by the browser, the text should be there.
Does anyone knows a way to achieve it? Thanks!
To render SVG you can also use CanVG library.
It is SVG parser and renderer with canvas resulting output.
Next you can simply output pixel data from canvas to PNG.
To resolve IE limits you can use Chrome Frame.
I want to manipulate the image data of every frame of an animated gif as it plays in the browser, and I want to do it using HTML5 canvas and Javascript. For example, I have an animated gif, and I want to convert every frame to grayscale as it plays in the browser. Is this possible? Whenever I manipulate the image data in an animated gif, only the first frame is shown (correctly manipulated) and the gif won't play any further. This would be a very useful technique if there was a solution for this. Thank you.
EDIT: Is there a way to query the current frame of an animated gif in Javascript, so I can just use putImageData into the image as the animation progresses?
As this page points out, you can use drawImage() to draw the GIF on the canvas, and at the moment it'll draw the current frame from the GIF in Gecko and WebKit -- but not in Opera, and also not according to the spec, so it's not a good idea to rely on this behavior. As far as I know there's no way to get individual frame data from the DOM; I looked into this for a while before writing jsgif (which was mentioned in another answer, but isn't really meant for any sort of practical use as it is -- it's very inefficient, for one).
If you can get away with unpacking the frames on the server and then animating them manually (e.g. like Gmail does), that might be your best option.
Is there a way to resize the actual image using JavaScript? I'm not talking about modifying the DOM to get the browser to resize the image. I actually want to resize the image's pixel data and then display that.
Basically my problem is: Firefox completely fails at downsizing images with delicate features because it only has Nearest Neighbor and Binlinear. Every other browser -- even IE -- has Bicubic support. There's talk of this being included in the near future but that talk has been going on for over a year.
I don't mind downloading the full sized images because I want them downloaded anyway. When the user hovers over the small version of an image, the large version immediately appears elsewhere on the page. If I did server-side resizing I'd have to download BOTH copies of the images which would result in even more traffic. If there's no other workaround then this is what I'm going to have to do... I just don't want to.
It is possible. You get a image on the same domain, write to canvas, then manipulate pixel data from there (complicated, but possible I'm sure), and then either use that or output as png/gif/jpg... BUT... I don't think you will find it will better way to preserve delicate features that CSS.