I would like to scale an image up with scale = 2.0. I would like do to that without any smoothing, so the desired effect is to turn each pixel of the original image into 2x2 pixels of the same colour.
I wonder if this is possible to do in Javascript/CSS in a cross-browser (>= IE7) manner without resorting to <canvas /> tag.
Sorry, I don't believe the effect you want is possible cross-browser without a canvas.
In Firefox in Canvas you can do ctx.mozImageSmoothingEnabled = false; but that's as close as you're going to get.
image-rendering: -moz-crisp-edges; might help you in firefox for CSS scaling, and -ms-interpolation-mode* might help you in IE, but I doubt you'll get a solution that looks the same across all browsers.
* I think this has been deprecated/obsoleted.
Any details of rendering methods e.g. anti-aliasing/smoothing are out of CSS 2.1 scope. So the answer is 'no' for CSS 2.1. Image object in JS does not have scaling features either. So 'no' again.
I know flash is a dying technology, however this is some pretty excellent image manipulation scrips should you wish to check that out. This seems a little complex for standard web based image processing although Sounds like a wicked idea!
Related
What I'm looking is a flash alternative for mobile phones using html5.
I was looking into SVG and it seems the only way to get hardware acceleration is to use CSS transforms on it. But CSS transforms aren't enough, I want to animate the actual nodes that make up a vector (ie, points on a path) so I could get more sophisticated character animation. To do this I was looking at some gui based editors.
I checked what adobe has been up to and they seem to have killed Edge Animate and rebranded Flash as "Animate CC" for 2016.
http://blogs.adobe.com/creativecloud/update-about-edge-tools-and-services/
https://blogs.adobe.com/flashpro/welcome-adobe-animate-cc-a-new-era-for-flash-professional/
But reading up on "Animate CC" I see that it exports vector animations to either Canvas or WebGL. Which I think is due to them not getting hardware acceleration with native SVG via SMIL or using javascript.
https://css-tricks.com/guide-svg-animations-smil/
Another one is http://www.animatron.com which converts everything to canvas as well.
So my question is, in order to do keyframe animations on nodes within a vector path, a vector needs to be converted to either WebGL or Canvas for it to be hardware accelerated on mobile?
p.s I prefer using SVG as it's loaded in the DOM and I can manipulate things with jquery. This is for a mobile game that uses vectors (svg) as its base but I'd like to incorporate animations too - beyond the basic css transforms. I wish there was a way to have a .svg file that not only contains the vector information but also the animation info. so I could load this .svg file. and then in javascript go:
character1.play('animation1') or something. If SMIL worked fast I'm sure editors like adobe would make it as simple as that.
EDIT: I just read that Chrome 45 killed SMIL in favor of "web animations" and css.
https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL
And as Kaiido mentioned in the comments IE never supported smil so maybe that's why adobe never exported to it (?).
http://caniuse.com/#feat=svg-smil
also I never saw any examples online that show hardware accelerated path animation with smil, if any of you guys find a link pls let me know.
EDIT #2: I'm thinking of giving up my wishful thinking and instead looking at vector to canvas exporters like animatron.com. However, it doesn't seem like canvas is even hardware accelerated or fast like css3 transforms. I loaded some animations from animatron in my old iPhone 4s/iOS 8 and it's jittery and slow for example:
https://www.animatron.com/project/1953f3526e5b2ec4eef429c8
whereas css3 transform animations always run very smooth...
I still haven't tested vector to webgl.. but I think that's why adobe eventually chose to use it for their vector animations since canvas is slow and svg is limited.
EDIT #3: sure enough it seems like webgl is the way to go (unless someone finds a way to do this with native svg) http://www.yeahbutisitflash.com/?p=7231 .. this works fast in my iphone 4s/ios8.. I currently think this is the only way to do what I want: hardware accelerated vector based animation (however the graphics don't look as crisp as I'd want them.. webgl kinda messed with that I think).
but this is why I think Edge Animate got killed cause they were trying to create a tool that took advantage of css3 transforms, but ppl want to animate vector nodes so they went back to Flash and rebranded it. (another note: the above webgl anim doesn't work so well on my galaxy S4/kitkat android phone.. so this is mainly for newer devices/OSs)
EDIT #4: come to think of it. it'd be a pain to have multiple webgl contexts running in my program. so if I had 10 animated characters I'd have to have 10 webgl contexts which would be intense for a mobile device.. unless I chose to do the whole game in flash, and then I'd have one big webgl context after I export it. but I prefer to work in the dom. oh well css3 transforms for the meantime.. :/
EDIT #5 - Dec 2016: I'm now using svg/javascript with snap.svg. modern phones seem fast enough.
Other Useful Links I Found:
http://www.crmarsh.com/svg-performance/
Canvas is (as far as i know) software accelerated. So it's rendered by the processor (CPU). The processor (cause of them pixels) ain't that good at graphical stuff but for simple things it would be enough. And it runs everywhere, where there is a processor.
If you want to have better performance on hardware accelerated devices which most modern smartphones are, you need webgl. But you can export your stuff in webgl from adobe CC. Older smartphones are not very optimized on hardware acceleration so please check with your target group what devices they have and try to run your app on one of the slowest devices.
I would not use SVG. SVG is even worse than DOM. You can be faster manipulating HTML in javascript than SVG. I don't know why but it is damn slow. SVG is just an alternative if you want to have scalable graphics or charts and that's what it is made for. To animate in SVG is a pain. Don't do it. It is not optimized for animation.
CSS-Transform is a prototype-like and will not help you with keyframe animation. But it has potential to have an eye on it.
Does this help you?
This library/plugin might be exactly what you are looking for: Greensock SVG Morph Plugin. It seems to perform pretty well on mobile, not sure how well it performs on devices mentioned by you.
It's also not GPU accelerated but Greensock Animation Platform seems to perform extremely well even on mobile devices.
I think its a difficult question to answer as there's so many issues with different browsers. Some don't support SMIL transforms well (or being deprecated, but as mentioned there are fills for it), some don't support CSS3 transforms on SVG elements at all, so most of the 'solutions' out there, have some issue that may need to be compromised on. I think one browser doesn't support d attribute morph properly, but I can't recall which (so test this early on with required browsers if you do go down this route).
Canvas does typically seem to perform better on mobile for most animation I've seen or played with, certainly as the number of objects increases on page.
Other alternatives to webGL that was mentioned..
One option that kinda springs to mind is fabric.js, which is a canvas approach to SVG. It will take the same commands, elements as SVG, but display it on an HTML5 canvas. Turn off drag/freetransform within it (as I think its slowed down a bit with this if it needs extra checks), and I think it will be a bit faster, but its a while since I've played. This could be an interesting approach if you don't need specific DOM element access, but would be fine if you are ok with a similar object based setup.
If you insist on using SVG, then I would look at integrating it with another library (or even 2). Snap or SVG.js are both decent, but can be a bit slow. However, I would experiment with using Velocity.js or React.js with that svg library, as they have some methods that can squeeze out a bit more performance. Also GSAP may be worth a look.
There is no general answer to this, it depends on the browser implementation and your hardware, but ... for the long term solution I would bet on WebGL because it uses the GPU and will ultimately dominate.
WebGL is not well supported right now (2016), and it potentially comes with security issues.
Also see: https://css-tricks.com/rendering-svg-paths-in-webgl/
Canvas is better at working on raw 2d pixel buffers (+ alpha channel) and is slow for higher resolution+animation.
You could use some dual lib like Pixi though.
If you don't mind the k-weight increasing a bit and are comfortable using flash, the easiest and the fastest solution would be to use Animate CC (It's exactly Flash, without the symbol filters and gives canvas output instead of swf).
the effect i want to realize is just u can see from website below:
http://www.designasaurus.co.uk/page2/page9/page9.html
i do really want to realize this effect mainly using jQuery/js combined with html and css. And the i'll put these resources under the assets of my Android project, so i can view this effect on my Android devices. Hoping some one can give me some tips or referenceing websites to realize it, or u can just tell me that: hey, buddy! u cann't realize it in you Android project.
Edit: No luck in Android Browser. Before WebGL, however, I would look into canvas Transform methods:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations
Start at "A Scale Example"
These should be less bleeding edge than WebGL
/Edit
To be honest, I'm a little behind on the latest CSS3 stuff but it sounds like CSS transforms would fit the bill.
I imagine android default browsers are pretty much Chrome. Looks like you could find some leads on how to do it with CSS here. See the bottom-most example.
http://css3.bradshawenterprises.com/transforms/
Not sure how smooth that would go with a background image though.
For more complete control, you'd probably want to look into webGL which is still pretty bleeding edge but no more so than the latest CSS3 but the CSS3 might be all you need here.
How do I print rotated content (divs) in IE8? The DXImageTranform filter options do not appear to be printable.
http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85)
Just to put this into context. I'm writing a pure dom-based canvas library called simpleCanvas. I am desperately trying to offer rotation of text, rectangles and images in IE8 without using a VML fallback, because it's ugly and slow, and error prone. A VML fallback is on my todo list as I concede that it's the only way I know how to do this in IE8 without additional tools. I'm hoping that there is some trick that I'm missing that doesn't come with a third party or server side requirement. If you have found it, a bounty is coming your way.
This is a massive stretch but is the best idea I could come up with:
Explorer Canvas - https://code.google.com/p/explorercanvas/ - Implements the canvas in IE8 by abusing VML.
HTML2Canvas - http://html2canvas.hertzen.com/ - Can render your document onto a canvas, which can then be rotated.
Failing that, I suspect your only option is going to be to generate a rotated document server-side and give that to the client for printing.
Edit: One other last ditch would be to handle the printing via Silverlight, embedding the page in a browsercontrol inside silverlight (yuck), rotating that and printing the result via SL.
Really grasping at straws here though for anything client side in a legacy browser.
According to Printing webpage with rotated text in Internet Explorer 9 you need to use -ms-transform too. Be sure to read the EDIT too as there is something buggy.
Would https://developers.google.com/chrome/chrome-frame/ be acceptable? I'm guessing not if its a LOB application, but it'd give you the features you need without taking the user out of IE8 in the strictest sense. Just another avenue to explore.
https://code.google.com/p/jqueryrotate/ - This will rotate images, it uses VML to do it in IE8. The caveat is that any text you wanted to rotate would have to be as an image.
I've never used it and it would be some work but have you tried svgweb? Basically it uses SVG if the browser supports it and Flash if it doesn't. Because it's a flash object you can print it like an image once rendered.
Here's a few more demos of it: svgweb Demos
I am wondering if there is any work-arounds using javascript or whatever to get IE to show border-radius or gradient background?
I came across this by looking for fixes to using 'gradients and border-radius' in IE9. And yes while its true you can now use both in IE9, you sadly cannot use them together.
The issue is documented in a a few places:
http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx
IE9 border-radius and background gradient bleeding
The issue seems to be related to border-radius not playing nice with IE's old filter gradients. Sadly the release of IE9 did not bring proper CSS gradients.
jquery for at least the radius / corners item.
For gradient backgrounds see this.
You don't need to use jQuery for rounded corners, there are solutions that will make browsers behave well even in the event of javascript being disabled.
Check out http://css3pie.com/, provides a pretty simple solution (htc file) for making this work. As monn indicated IE9 gradient and radius don't work together. Css3Pie is intended to let you dev with css3 markup but provides backups for IE back to IE6.
There's also css3please and compass (for ruby).
This issue has recently been discussed in the HTML5 Boilderplate issue queue (HTML5 Boilerplate is a well-vetted collaboration to bring together the best techniques in modern web markup as a starting point for any platform).
https://github.com/paulirish/html5-boilerplate/issues#issue/354
Here's a demo of the problem & solution:
http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx
This is quite new: https://github.com/bfintal/jQuery.IE9Gradius.js
Just include the script last in your head tag and it should handle the rest. See readme notes
I'm showing images from other websites as thumbnails. To do this I display them in a smaller img tag so the browser does the size decrease.
The problem is that the quality of these images (which I have no control of) is diminished.
Also they look much better in FF and Safari than in IE.
Is there a way to make these images look better without caching them on my server? (e.g a javascript library that does the resize with better quality)? Any idea is highly appreciated.
IE's default image resizing algorithm is not that nice - it can be changed by tweaking a registry entry, but of course that is outside of your control.
However, apparently it can also be triggered to do a better image resize through css
img { -ms-interpolation-mode: bicubic; }
source: http://edmondcho.com/blog/2009/03/17/internet-explorer-image-resizing-tip/
A quick Google search shows that in IE7 you can fix the image quality problem:
http://devthought.com/tumble/2009/03/tip-high-quality-css-thumbnails-in-ie7/
The only way to have control is to do the resizing yourself. Various browsers will use different algorithms, some with unsharp masking, some without. The filters used after resizing control most of this. Specific CSS tagging can control this to some extent.
Javascript can't really handle this, but using Flash or similar would allow this. You would have better control of the image. However, you would lose the "imageness" as far as HTML.
One thing I didn't see mentioned by the others - you aren't really resizing the image, you are just displaying it in a smaller space. Let's say you are pulling down an extremely large image file (5MB) and displaying it at 1 x 1 - it's still 5MB!
Writing a caching solution for these images wouldn't be very difficult at all - and will save you the legal ramifications and embarrassment. If I saw your site in my log files and realized you were pulling down my images, you would be Goatse'd - hard.
If you are working with a source image and simply re-sizing on the client, there isn't going to be a good way to do this.
Now, aside from the potential legal ramifications of using other sites images you could look at a simple caching process, and do a quick re-size on the image, and keep the aspect ratio, so that the display is good. This also helps reduce the bandwidth that you are using from the other sites.