{"id":134,"date":"2010-08-02T12:29:24","date_gmt":"2010-08-02T12:29:24","guid":{"rendered":"http:\/\/patternweaver.com\/blog\/?p=134"},"modified":"2010-08-02T12:32:06","modified_gmt":"2010-08-02T12:32:06","slug":"imagebooth-recap-multilayered-imageeditor-in-pure-javascript","status":"publish","type":"post","link":"http:\/\/patternweaver.com\/blog\/2010\/08\/imagebooth-recap-multilayered-imageeditor-in-pure-javascript\/","title":{"rendered":"ImageBooth Recap: Multilayered ImageEditor in pure Javascript"},"content":{"rendered":"

As I’ve been finishing features, I’ve just been updating what the new stuff is… but now that I have a working implementation of layers (though save isn’t yet linked to layers), I figure it’s time to stop and give an overall view of the ImageBooth Demo app and what it does.<\/p>\n

When you open it up you see a vanilla image editor interface. What is important to note, is there is an internal compositing framework outputting to 1 canvas in the end, with ImageBooth using many canvases internally for layer and render buffers. Also, the 4 main interfaces(Brushes, Tools, Filters and Operations) are all pluggable, so it’s simple to contribute.<\/p>\n

\"The<\/p>\n

The currently available plugins are:<\/p>\n

Tools<\/h3>\n
    \n
  1. Paintbrush – paint the foreground color onto the selected layer<\/li>\n
  2. Eraser – paint the background color onto the selected layer<\/li>\n
  3. Clone – clone pixels relative to the clone source using the current brush<\/li>\n
  4. \"thePaintbucket – flood fill a color into an image at a certain pixel with a given threshold and opacity<\/li>\n
  5. Eyedropper – sample a color from the current layer<\/li>\n<\/ol>\n

    Operations<\/h3>\n
      \n
    1. \"theNegative – invert the color values of the image<\/li>\n
    2. \"aBrightness\/Contrast<\/li>\n<\/ol>\n

      Filters<\/h3>\n
        \n
      1. \"theGaussian Blur – Blur the image<\/li>\n
      2. Sobel Edge Detector<\/li>\n
      3. \"aLaplacian Gradient Detector<\/li>\n
      4. \"aSharpen<\/li>\n
      5. \"aEmboss<\/li>\n
      6. \"aHigh Pass Filter<\/li>\n<\/ol>\n

        Brushes<\/h3>\n
          \n
        1. 1×1<\/li>\n
        2. 3×3 Round<\/li>\n
        3. 5×5 Square<\/li>\n
        4. 5×5 Round<\/li>\n
        5. 5×5 Soft Round<\/li>\n
        6. 10×10 Scattered<\/li>\n
        7. 10×10 Soft Round<\/li>\n<\/ol>\n

          So while it’s definitely got a lot of rough edges, it’s really becoming more practically useful all the time. That is, unless you use IE…<\/p>\n

          So go to the ImageBooth Beta<\/a>, grab an account, and play around with it.<\/p>\n","protected":false},"excerpt":{"rendered":"

          As I’ve been finishing features, I’ve just been updating what the new stuff is… but now that I have a working implementation of layers (though save isn’t yet linked to layers), I figure it’s time to stop and give an overall view of the ImageBooth Demo app and what it does. When you open it […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,6],"tags":[],"class_list":["post-134","post","type-post","status-publish","format-standard","hentry","category-datalus","category-js"],"_links":{"self":[{"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/posts\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":0,"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/posts\/134\/revisions"}],"wp:attachment":[{"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/media?parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/categories?post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/tags?post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}