Posts Tagged ‘canvas’

Drag Out Images and Canvas With Filenames

Thursday, May 10th, 2012

It can be annoying that when you drag out images of a browser window, they are named png.png (or something equally useless). I was playing around with fixing this – it is a little inconvenience in my CSS Sprite Generator that would be nice to have working (naming the file based on their input). Here is what I came up with (no library dependancies):

function dragoutImages() {
 
    if (!document.addEventListener) {
        return;
    }
 
    document.addEventListener("dragstart", function(e) {
        var element = e.target;
        var src;
 
        if (element.tagName === "IMG" && element.src.indexOf("data:") === 0) {
            src = element.src;
        }
 
        if (element.tagName === "CANVAS") {
            try {
                src = element.toDataURL();
            }
            catch(e) {  }
        }
 
        if (src) {
            var name = element.getAttribute("alt") || "download";
            var mime = src.split(";")[0].split("data:")[1];
            var ext = mime.split("/")[1] || "png";
            var download = mime + ":" + name + "." + ext + ":" + src;
 
            e.dataTransfer.setData("DownloadURL", download);   
        }
    }, false);
}

You just need to specify the alt attribute on the image or canvas to specify your name (along with the draggable attribute on canvas elements) and the script should handle the rest.

Browser Support

I am not 100% sure on browser support. This used to be Chrome only according to this HTML5rocks article, but maybe other browsers have picked it up by now. It is a neat little addition when available though.

Demos

See the full demo: drag out images with custom file name. This shows the ability to drag out both image and canvas tags.

On this page, you should be able to drag out the following colorpicker screenshot, which will be called spectrum.png.

spectrum

Gradient Generator

Wednesday, April 18th, 2012

I have been working a browser based gradient generator. I’ve never had the best experience using gradient generators, so I decided to see if I could do better.

It is a prototype right now (a weekend project), but I am hoping to do more with it as time permits.

Features

  • It outputs to CSS, Canvas, and SVG
  • Allows for separate color and alpha stops
  • Keyboard support (left, shift+left, right, shift+right, ctrl+c, ctrl+v)
  • You can Copy/Paste current stop
  • Undo/Redo
  • Easily sharable URLs with the hash tag Example gradient or a GET parameter (Example with GET parameter).
  • Local Storage Support to keep track of your work
  • Potential Future Features

    • Support for radial gradients
    • Cross browser CSS output
    • Saving your gradients to server
    • Multiple layers for stacked gradients
    • More CSS 3 effect generators (box shadows, rounded corners, etc) built into the UI
    • Any other ideas? Leave a comment or tweet them to @bgrins!

    I haven’t come up with a better name yet, so check it out here: http://briangrinstead.com/gradient!

    Gradient Generator Screenshot

Instant Sprite – CSS Sprite Generator

Friday, November 19th, 2010

I’ve been working on a project to make generating CSS Sprites faster and easier. It is called Instant Sprite, and available at http://instantsprite.com. You can drop the images right into the browser (or open them up in a file input) and it generates the sprite in the browser, with no file uploads. You can check it out and use some sample images provided if you don’t have any images available.

Instant Sprite uses HTML Canvas and the FileReader interface to read images from your hard drive – this prevents you from having to zip up all the images before passing them off to the sprite generator. You can also preview your changes to CSS tweaks in real time, so you don’t have to resubmit if the file match regex isn’t doing what you want.

I’d like to give credit to Aaron Barker for helping out with a lot of feedback and UI suggestions.

I made it for myself so that generating sprites was easier, but put it online because I think it might be useful to others, too.