Mockup Generator in HTML5 with Matrix3D Transforms

A while ago, I played around with a cool Perspective Transformation using SVG and matrix3d CSS transform. It made sense to turn it into a mockup generator like Magic Mockups or PLaceIt. But, I ran into some issues when overlaying an SVG with matrix3d transforms on HTML5 canvas. I found an JSfiddle example of just using HTML5 CANVAS and transformed it into a full mockup generator.
Read more

HTML5 Canvas Animation Converted to Video

I was recently playing around with dat.gui and the cool FizzyText animation made me consider the concept of exporting HTML5 Canvas to video. I have previously covered canvas to video conversion but it was specific to making a photo slideshow. Today, I want to create a simple script in JavaScript that will grab any CANVAS element, on any website, retrieve the image frames, and compile them into a video file.
Read more

Instagram Image Filters with HTML5 Canvas

Preset photo filters are nothing new but Instagram has certainly made them very popular in recent times. While Instagram and it’s many clones are manipulating pixels with native technologies, the web has HTML5 CANVAS which enables all kinds of image editing with JavaScript. There are many image processing libraries today that could be used to recreate Instagram photo effects in the browser. Today, I am going to explore some of these scripts, evaluate how they can be used to recreate the actual Instagram filters, and create a demo that combines HTML5 drag and drop, webcam photo capture, and lots of various preset photo effects.
Read more

Image Zoom, Drag, and Crop with HTML5

I am on a mission to create an amazing HTML5 image editor and want to write a little about zoom, crop, and drag or pan. These are 3 features with a lot of overlap, depending on the design choice and implementation, so I would like to first consider the user experience. Panning or dragging the image, or a selection of the image, is going to be a clear need that is shared by both zoom and crop. If I click on an image and drag, am I moving the image or selecting an area to crop? One way to fix this dilemma is to only allow one of these operations at a time, but that requires extra user clicks. An alternative is to drop a special “crop selection area” on the image at all times and allow resize or drag of that element while dragging outside of that area moves the image. What is the best user experience?

Zoom could be implemented with plus or minus buttons that change the scale of an image or a canvas object. I have also seen dropdowns that let you set a zoom level in percentages but both of these implementation require extra unnecessary clicks. They also require shifting the mouse between clicking and dragging of the image, so the act of zooming in and out seems to have a better user experience with a mousewheel implementation. Cropping an image, in my opinion, should also work using a mouse selection and personally, I would vote for enable/disable action instead of keeping a persistent selection area on the image at all times. So, you can use zoom at all times but cropping an image requires selecting the crop tool. Finally, how do you zoom to a mouse cursor and does the zoom actually change image data via html5 CANVAS or should it just manipulate the CSS transform property and if so, how would the CSS change affect cropping?
Read more

HTML5 Video Streaming with Blob Urls

I have written a few demos on using the HTML5 video tag, showing how you can make screenshots from movies or create animated GIFs, but last night I noticed some major issues with loading a large local video file. It basically crashed my Chrome tab and after looking at my code again, this makes sense. When the user dropped or selected a local video file, I read that entire file using the FileReader API and then created a Blob URL out of it so that it can be used in the HTML5 video tag. But, reading the entire file is not necessary as both the video and audio tag support a file stream.
Read more

Convert Images to Video with JavaScript

How do you make a video programmatically? Sending images to a server side program like FFmpeg is one option but how do you make a video from images in HTML5, all on the client side? In the past, I have converted html5 canvas frames into an animated GIF and now I am looking to do something similar but finish with a video file. You need a video encoder and today I just happened to stumble on Whammy, a real time JavaScript WebM Encoder. It even comes with a demo which shows how CANVAS frames are encoded into a webm video file. So, today, I am going to create an online video creator that lets you upload some images which get converter into a picture slideshow in video format.

Here is the Online Image Slideshow to Video Converter
Read more

Clip Map Images on Text Background

I was looking at my clipping map tiles example where I clipped some imagery behind a word created with GeoJSON paths and wondered if I could just use a normal font which would clip a photo using css background URL attribute. It would be cool to see how map tiles can be rendered as CANVAS tiles, combined into a single canvas, converted into an image, and then applied in a CSS background attribute to clip imagery behind text. Instead of converting text to GeoJSON paths, I want to make an online tool that does all the magic for me with regular text, CSS, and CANVAS.
Read more

Make Screenshots with HTML5 Video

Update:
Below I talk about how FileReader is used to read the user selected video but reading an entire video into memory is a bad idea and will not work with large videos. The updated links skip this step and construct a blob Url right away, and as a result, stream the video so that it can be used right away and you can load large files.

A while ago I have written about making screenshots with YouTube videos but today I want to approach this problem from another angle. The YouTube post mostly talked about the problems of pulling videos from YouTube and saving the video data from CANVAS to an image. Doing that purely on the client side is not easy, but today I want to leverage HTML5 Video, FileReader, Blob Urls, and CANVAS to show how to load local video files (perhaps ones you already downloaded from YouTube with various other solutions), slow down the video playback, and convert those video frames into an actual image so that you can make video screenshots with your browser.
Read more

D3 Globe with Canvas, WebGL, and Three.js

D3.js comes with a lot of geographical projections and there are many cool demos that let you explore different ways of visualizing a map of our earth. I really like the orthographic projection as it gives you a perspective (or azimuthal) projection where earth is a sphere or globe as it appears from outer space. D3 already has some great examples of this projection, and I have also made my own basic D3 Globe with very little code. But today, I want to expand on this concept and try to incorporate an image of the earth into the globe projection to create a more realistic view of earth. First, I will attempt to make this happen with just HTML5 Canvas and then I will explore other technologies like WebGL and Three.js to make the globe more responsive.
Read more

Lava Lamp with HTML5 CANVAS

I like Lava Lamps and today I wanted to create one using CANVAS and a bit of JavaScript. I decided to do this after watching some amazing demos from the 1k Javascript contest. It’s pretty cool what people can write in 1K or less. My lava lamp effect is also written in really tiny amount of JavaScript, just some CANVAS pixel manipulation running in a loop. Check out the demo and look at the source to see the code.