HTML5: Is building this possible?
- Started
- Last post
- 11 Responses
- PonyBoy
http://www.arcademedia.net/clien…
(sorry for the music... 'stop music' button is bottom left)
I have a client looking for me to reproduce this same concept in HTML5 (Flash is okay... but we'd like it to be far more accessible if possible).
Any QBNers have experience using the Camera Class (and other applicable Classes) via HTML5 / JS to handle scaling / rotating / adding elements to your photo... and then capturing / saving / sharing the new image like the above Flash example?
I'm looking for resources that'll let me accomplish this... or for a vet developer out there to say it 'is' or 'isn't' doable via the HTML5 route.
- BabySnakes0
I believe it is very possible with the HTML5 Canvas and JS. (I personally have done much with it) HTML5 can access device cameras and other things, though you still run into accessibility issues with older browsers. As for flash will work on everything besides mobile. Hope it helps...
http://www.html5rocks.com/en/tut…
http://www.html5rocks.com/en/tut…
- studderine0
I remember an agency case study with a very JibJab type campaign microsite using HTML5 rather than Flash. Flash is definitely easier, but well, as you already said, it automatically renders your design useless on some devices. If I can find that dare case study I will link it here.
- boobs0
It seems like no matter what format you do anything in, you're going to miss a big chunk of people. If you do it in Flash, you lose a lot of mobile users. But, in HTML5, you lose people with old browsers. I've read that about 15% of users are still on browsers that don't support HTML5/CSS3.
- Plus, there are people with their Javascript turned off. And images.boobs
- also, no guarantee it'll be in mobile safari 7 (>5%) or ie 11 (>25%)kingsteven
- still better odds than Flash. And people who turn off images and js can be written off as dead and useless.CyBrainX
- I'm sorry. Was that mean?CyBrainX
- kingsteven0
wait a couple months to see if getUserMedia is included and stable in the next safari, mobile safari & ie...
when that happens it'll all kick off with folks rushing to be the first to make one of those shitty water, fire, smoke, snow demos.
- good but still won't solve the huge number of people who use outdated browsers,GeorgesIV
- GeorgesIV0
(had the soundtrack in the background, goddammit this song is dynamite hehehhe)
- animatedgif0
This shit is piss easy in HTML5. Concept is woefully tiresome though, even down to the naming.
Can't believe advertisers are still regurgitating that "Elf Yourself" concept in 2013
- Good point. I always feel too lazy to do all that stuff as well.CyBrainX
- PonyBoy0
I can appreciate the opinions regarding the concept... I built the Black Dynamite deal 5 years ago and have worked on other rips of the concept in the past (I agree it's tired... but I'm still tasked to build it) I can create this in Flash in my sleep... I'm just curious about the existing HTML tech.
animatedgif... any chance you can share some resources? I understand I can capture a webcam image no problem and I'm familiar w/many of the filter scripts available for editing pixels...
Where I'm stuck: Do I have the ability to create a new image by layering images on top of another? (ie: a PNG of a 'hat' (or multiple PNGs) that can be placed / rotated / scaled atop a background raster). There's lots of image filter info out there but I'm not finding anything that allows you to create a single image out of multi-layered PNGs atop a background image...
Also... am I right in thinking that to produce this in HTML I'm looking at a far longer production schedule than I would in Flash? (because of all the browser testing)
- monNom0
Ponyboy: you can stack canvases to create 'layers' (position:absolute, z-index: 1,2,3, etc.). Once happy with the result, you read the bitmap data from the canvas and use a composite operation to draw to your base canvas.
var canvas1 = $('canvas2');
var canvas2 = $('canvas2');
var ctx1 = canvas1.getContext('2d');
ctx1.globalCompositeOperation="s...
ctx1.drawImage(canvas2,0,0);When you're done, you can pull the data with
dataToURL('img/png');
- Pixter0
take this