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
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
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
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
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.js comes with a lot of geographical projections and there are many cooldemos 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 greatexamples 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