MediaPlus now supports the ability to edit/enhance HTML5 Videos and Images.
To install MediaPlus with these enhanced functions, drag and drop the following bookmarklet to your favorites/bookmarks bar.
The previous post explains how to install MediaPlus as a bookmarklet and how it can be used to move, resize or download media content on web sites. This post describes the additional functionality added to MediaPlus to perform enhancements like brightness, contrast, color adjustment, etc on images and videos.
Architecture
MediaPlus uses Pixastic for manipulating the media content. An image or a canvas can directly be passed to the Pixastic processor. Pixastic then reads the image data from the image or the canvas and manipulates it. It draws the final image on the target canvas.
In case of videos, MediaPlus passes a canvas to Pixastic instead of the actual video. MediaPlus continuously draws the latest frame of the video onto this canvas that is picked up by Pixastic for processing.
Limitations
Since pixastic relies on getImageData, it is restricted by the same domain policy. The Canvas Security policies mandate that pixel data cannot be read from a canvas if content from a different domain have been drawn on the canvas. Unfortunately, a lot of popular websites host their video content on CDN servers that has domain, different from the page. This results in the inability to manipulate HTML5 videos from youtube or facebook.
Most browsers also do not support the CORS way to reading image data yet.
Workaround for Images
The same origin restriction also apply for images. However, Images can be converted to data:uris using a web service and drawn on the canvas. Such images can then be manipulates as they are not from a different domain. However, the data:uri web service can only manipulate images that are directly addressed using a URL.
Image Zoom
Another addition specific to images is the ability to magnify images. The image zoom works just like most image zoom plugins, drawing a larger image inside the magnifying glass and moving it around with the magnifying glass is dragged over the image.
Next Steps
I am working on the ability to allow rotations and CSS3 3D transforms on videos and images. This is a little trickier as I would have to ensure that other functionlity like resizing or dragging continue to working on media content that is rotates in the z axis. Watch out the project page or this blog space for updates.
If you encounter bugs when using MediaPlus, you can report them or contact me.
