This is a LONG shot, but maybe someone out here is a super-genius.
I want to combine 4 jpgs in a grid
1 2
3 4
I want to do this client side, without SVG (because IE blows).
I'm looking at manipulating the code inside the jpg files to produce a single, new image. I will get them as all same-sized jpgs, and I can output them to another format (like bitmap) if necessary. I'm also wiling to accept solutions using any special IE "features" like VML. IE8 is the target audience.
I realize I can do this with SVG. I realize I can do this server-side. I realize I can css them next to each other. I need a single image from the 4 originals, as a string is fine (even preferable) because I can base64 encode it and throw it in an image element.
Thanks!
I am pretty sure that your only option (on the client) is actually flash based canvas libraries like FX Canvas . They give you full complement of standard canvas methods (such as toDataURL which you need the most)... Normally I would not advocate using Flash but using a library emulating canvas will make it a breeze to migrate your code when your client decides to upgrade their browser set.
Related
I've tried to ask this question before, but I failed completely there. After useful input, I decided to leave that one, and to try again.
I'm looking to create a web-based application where users can draw images built from a set of pre-defined icons. There is a need to be able to save the final image (encoded jpg/png), and also save a "current setup" that can be re-loaded later for further editing (a "settings" file?).
My question : What would be the best approach for this matter? Flash+AS3? HTML5+JS? Something else?
For better understanding of what I want to create, here are 2 screenshots that illustrate in what direction I'm thinking:
The drawing application (made in Flash): http://imgur.com/U4GNKJF
The final created picture: http://imgur.com/aCtxwo1
Thanks in advance, and I really hope I've made my question more clear this time.
Since you need advice...
Draw your icons in some art software (even online) and save as transparent PNG's
Look-up HTML5 Drag & drop tutorials that involve "Canvas". You'll want to meaure the positions of objects dragged (mouse position on Canvas) and their order. The drag function could update a JSON String (this hold entries of items, type, position, etc)
Look-up How to save JSON as text file, also how to parse text file as JSON. This becomes the "settings file".
To save images best use PHP language code. PHP must be installed on the server (most have, or is installable or else get a better host). There are tutorials on how to save an image with content from "snapshot of Canvas"
flash is unsupported on IOS and android mobile browsers and google is giving a lower index to websites using it.
I would use javascript with HTML5 canvas with PIXI.JS ,CreateJS or PANDA.JS.
These libraries make it easier to create the canvas elements you need (draggable objects, buttons ) from sprites and adding event listeners to them.
And drawing graphics on the canvas (lines, shapes).
Since you have a lot of sprites you can pack them in a spritesheet with TexturePacker for faster loading ( and PIXI works great with spritesheets).
You can package this web page to android/ios with phonegap,ionic,crosswalk, cocoonjs etc ( i recommend ionic + crosswalk webview it gives great performance)
for saving i would also use a json file to save the setting . You can use PHP to load and save it.
I have dynamically loaded a JPEG image into a 2D html canvas and I would like to access the raw YCbCr pixel values.
From what I understand, JPEG encodes the pixel data in YCbCr, but chrome appears convert it to RGB when accessing it with getImageData().
I have tried using the RGB to YCbCr conversion calculations but it appears to be a lossy conversion as they don't map perfectly 1-to-1.
Is it possible to access the raw YCbCr pixel values in JavaScript?
Yes and no.
When the browser loads an image with the native methods (ie. Image element) the YCbCr (in case of JPEGs) are automatically converted to RGB space by the browser and ICC and gamma correction is applied by browsers which support that.
This mean that when the image is loaded and ready for use, it is already in RGB space (which is correct as the monitor is RGB). The canvas does not have a part in this process and will always contain pixels as RGBA. All browsers supporting canvas will therefor return the data as RGBA when using getImageData().
The only way to access raw YCbCr is to do a low-level parse of the raw file yourselves. You can do this in any language that can iterate bytes including JavaScript. For JS I would recommend using typed arrays and DataViews to parse over the data but be warned: this is tedious and prone to errors (as it is a whole project on its own) but fully possible to do if you absolutely need the raw data.
Another way is to convert RGB back to YCbCr but chroma and the aforementioned color- and gamma-corrections will probably affect the result not making it identical to the original raw data (which in any ways is in compressed form). You can also export canvas as JPEG using the toDataURL() method on the canvas element.
I know this is a very old question, but wanted to provide the update that Chrome now rasterizes some JPEG and WebP images directly from YUV planes. You must have GPU rasterization enabled (and Metal disabled) and might sometimes need to enable the feature from chrome://flags
You can run a trace, decode an image, and include the blink category and see if any events pop up for YUV decoding. If so, then you can experiment with trying to directly access the YUV planes from JavaScript, although I'm admittedly doubtful that will work out of the box (for plumbing/security reasons).
I know converting any image format to SVG is not an easy task, and it is not something I am pursueing for complex images. Let me explain why I am asking this question. As a web designer, there are elements in a site that I will commonly use an image for. There include simple geometric shapes, fleur-de-lis, some simple logos etc. The cost of these HTTP requests is relatively small (we are talking KB's here).
However, I am interested if these requests could be even smaller by using svg or other canvas elements instead of an image format for simple images. Has there been any research or testing to compare SVG vs. an image? Is it possible that I can make HTTP requests even smaller by using canvas for simple elements on my page? If so it would be great news. I could even start creating libraries of canvas images to re-use and share with others.
For simple shapes gzipped SVG will be pretty small and in modern browsers it's quite usable.
However, for page loading performance number of requests is a very big factor, so you'll get significant performance boost if you use CSS sprite sheets regardless of the image format.
If by canvas you mean storing shapes as JavaScript drawing commands (or a library that issues them based on some JSON) then it's unlikely to be big bandwidth saving compared to gzipped SVG (SVG has quite efficient format for defining paths, and gzip removes overhead of XML quite well).
You will have to wait for JS to load and either insert several canvases all over the document or burn CPU on compressing generated images and building data: URLs, so I don't think it'd be faster overall than using SVG or optimized PNG.
I think this will depend on the case.
Sprites can help.. but what if your sprite contains some simple lines yet must be 500px * 500px... then a canvas (or even svg) will indeed be a lot smaller. On top of that, external javascripts usually are cached (even better than images). In that regard, they indeed help slim down the weight.
However, if you'd expect IE to also 'work', then you might need to start to provide some html5/canvas shims and yes that would increase the weight.
Edit:
Look at this jsfiddle example (I whipped up for this question) where a full-size 'granite' background is created with a radial gradient.
As you can see (in the source) this is a LOT less bytes then a separate image (and will alway's be pixel-perfect).
On the other hand, it also (depending on the complexity) take some calculation-time that regular images wouldn't take (after the necessary bytes are downloaded to the client).
Edit2:
I found a link where they did a little test.
In our sprite example, the raw SVG file was 2445 bytes. The PNG
version was only 1064 bytes, and the double-sized PNG for double-pixel
ratio devices was 1932 bytes. On first appearance, the vector file
loses on all accounts, but for larger images, the raster version more
quickly escalates in size.
SVG files are also human-readable due to being in XML format. They
generally comprise a very limited range of characters, which means
they can be heavily Gzip-compressed when sent over HTTP. This means
that the actual download size is many times smaller than the raw file
— easily beyond 30%, probably a lot more. Raster image formats such as
PNG and JPG are already compressed to their fullest extent.
However, note all this is still depending how complex the image is: as an extreme counter-example.. try to describe a full color photo of a forrest (leaves..) versus simply a jpg..
The size always depends on the specific images, sorry but you have to test it at your own. There is no way to compare this in general.
I created animation in flash and converted it into HTML5 using Swiffy.
I think it's using SVG to render all of it; is there some JavaScript or a trick to make IE8 and below support it? My animation is working well with Internet Explorer 9.
Thanks!
While no option is perfect, there are a few choices:
1.) Adobe has a SVG plugin for IE8 http://www.iegallery.com/en/addons/detail.aspx?id=444
2.) The Raphael JavaScript Framework allows vector graphics cross browser - http://raphaeljs.com/
3.) Then there are the Open Source projects: http://code.google.com/p/svg2vml/ and http://code.google.com/p/svgweb/
4.) There is the option to display flash for IE8 and below.
5.) There is the option to gracefully degrade for IE8 and below and show a static image in place of the animation.
Based on your reason for the animation - I would recomend 4 or 5.
There are two options that will not tie you to specific frameworks (raphael) or complicated solutions (svgweb):
Chrome Frame: if you're going to get an extension, get that one
Server-side rasterization: send your SVG back to the server, inkscape rasterize to png, send it back.
If you go number 2 (yes it is a crappy option), and want to keep clickable parts and tooltips, you will have to use invisible divs, or labels that are in HTML on top of the rendered svg.
You can reuse the positioning information from the svg to position those divs in order to avoid overhead for that part.
The best option probably is to diplomatically encourage them to use a real browser, but then it's not always possible for those who live under the rule of an unskilled IT department ;)
I need to display a runtime-generated image (mostly consisting of nice-looking boxes, lines and text) on a webpage. We're currently using ASP.NET MVC3.
The problem is, I haven't really done web development before, and I have no idea how to go about drawing an arbitary diagram on a webpage. Do I use some sort of javascript? How, and what do I use? Do I generate the image on the server somehow and simply display it? Something else?
I have no idea where to even start, let alone solve the actual problem...
It depends on the target browser.
If you target the most modern browsers, you can use an HTML5 Canvas and draw on it using JavaScript (see http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/).
If you're targeting other browsers (as well), the easiest is probably to generate an image on the server side (GIF/JPG/PNG). Your HTML page then contains an IMG tag with the SRC parameter set to the page that generates and returns the image. You can find an example at this page: http://www.sitepoint.com/generating-asp-net-images-fly/ (this uses ASP.NET to generate the image).
Roy Dictus fairly well described the overall approach you'll want to take. If you decide to target modern browsers and use javascript, I'd suggest you look at Processing.js. It's a javascript port of a popular Java library, and the web page has some code samples to show how you can create both static drawings and animations with some simple code.