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
Today, I will show how to create an Image Proxy with Google App Scripts which would allow you to grab images from other domains or go around the browser’s same-origin policy. Basically, the Google App Script is a server side proxy for your client side request. So, if you are exporting SVG as an image with images hosted on another domain or saving HTML5 Canvas with toDataURL() method, this could help you avoid tainted canvas and browser security errors. But, really, it’s just a simple example of a Google App Script published as a web app. Read more
I was browsing old photo albums yesterday and it made me want to build an image viewer with HTML5. I want it to work with directories that have many files and this raises a question on browser performance. A gallery of pictures can easily consist of hundreds if not thousands of images. Loading all of them at once would probably crash the page or make it terribly slow and unresponsive. The DOM is not built to support so many elements with good speed. Plus, loading everything is wasteful as the screen size can only show a limited amount of images at one time. Read more
A lot of blogs and sites have a weekly roundup, a collection of articles and links that you might have missed over the week. I have been a big fan of HTML5 Weekly which is an awesome email newsletters with interesting links on web development. Aggregating content in our times of information overload can be helpful and many websites are now built for the purpose of gathering and organizing bookmarks around a topic. Today, I want to aggregate the aggregators, the weekly roundups, and other useful and free resources on web development that you should be following for staying up to date. 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