HTML5 Canvas Create picture mosaic effect Plugin

HTML5 Canvas Create picture mosaic effect Plugin

a Brief tutorial This is a JS plugin that uses HTML5 canvas to make images into mosaic effects. The plugin was inspired by the American portrait painter Chuck Close. Someone has used this JS plugin to create a complete picture Mosaic application framework: the Pixelator. Use this mosaic effect JS plug-in needs to use the same-origin picture, according to the HTML5 specification, the browser when parsing the Getimagedata () method will prevent the acquisition of cross-browser pictures. The HTML structure of the canvas plugin is very simple, which is to use aTags:"Portrait-image"Src="img/portrait.jpg"/>you can then call the plug-in using the following method: Function init () {document.getElementById ('Portrait-image'). Closepixelate ([{Resolution: -}, {shape:'Circle', resolution: -, Size: -, offset: A, Alpha:0.5 }  ]);}; Window.addeventlistener ('Load'Initfalse); You can use an array of available parameters to control the mosaic effect of the output. Each collection in the parameter array is an object that represents some kind of mosaic output effect. In the example above, the first set of parameters {resolution: -The control script draws a large square pixel every 24 pixels, and then fills the center of each square pixel with an exact color value. The second set of parameters uses all of the available parameters: {shape:'Circle', resolution: -, Size: -, offset: A, Alpha:0.5}。 Like the first set of parameters, its resolution is 24px, the shape of the pixel is round, each circle is 16 pixels in size, the right side of each circle has a 12 pixel offset, and finally the transparency of the circle is set to 50%. Available parameters Resolution: the distance between rendered pixels. Must be set. Shape: The shapes of the pixels. Optional values: square, Circle, and Diamond, default: Square. Optional. Size: sizes of rendered pixels. Optional. The default value is resolution. Offset: The shift value between pixels. Optional, the default value is 0. You can set only one value, which is the diagonal offset. can also be set to an array or an object: [ the,5] or {x: theY:5}. Alpha: The transparency of the rendered pixel, optionally, the default value is 1. Constructors and methodsvarimg = document.getElementById ('portrait-img');//Create a new Close pixelation instance with closepixelation//requires arguments:the original image element//An array of optionsvarMypixelation =Newclosepixelation (IMG, [{Resolution: - }]);//Re-render the canvas with different optionsMypixelation.render ([{Resolution: +}, {resolution: -, Shape:'Circle', offset:8 }]);//render a single option-set on topMypixelation.renderclosepixels ({resolution: -, Alpha:0.5}); Application example HTML5 canvas picture mosaic effect-1{shape:'Diamond', resolution: -, Size: -},{Shape:'Diamond', resolution: -, offset: -},{Shape:'Circle', resolution:8, Size:6} HTML5 Canvas picture mosaic effect-2{resolution: +},{Shape:'Circle', resolution: +, offset: the},{Shape:'Circle', resolution: +, Size: -, offset: -},{Shape:'Circle', resolution: +, Size: -, offset:Ten},{Shape:'Circle', resolution: +, Size: A, offset:8} HTML5 Canvas picture mosaic effect-3{resolution: -},{Shape:'Diamond', resolution: -, offset: A, Alpha:0.5},{Shape:'Diamond', resolution: -, offset: $, Alpha:0.5},{Shape:'Circle', resolution: -, Size:8, offset:4, Alpha:0.5} HTML5 Canvas picture mosaic effect-4{shape:'Circle', resolution: +, Size:6, offset:8},{Shape:'Circle', resolution: +, Size:9, offset: -},{Shape:'Circle', resolution: +, Size: A, offset: -},{Shape:'Circle', resolution: +, Size:9, offset:0} HTML5 Canvas picture mosaic effect-5{shape:'Diamond', resolution: -, Size: -},{Shape:'Diamond', resolution: -, offset: A},{Resolution: -, Alpha:0.5} HTML5 Canvas picture mosaic effect-6{shape:'Square', resolution: +},{Shape:'Circle', resolution: +, offset: -},{Shape:'Circle', resolution: +, offset:0, Alpha:0.5},{Shape:'Circle', resolution: -, Size:9, offset:0, Alpha:0.5} HTML5 Canvas picture mosaic effect-7{shape:'Circle', resolution: -},{Shape:'Circle', resolution: -, Size:9, offset: A} HTML5 Canvas picture mosaic effect-8{shape:'Square', resolution: -, offset: -},{Shape:'Circle', resolution: -, offset:0},{Shape:'Diamond', resolution: -, Size: the, offset:0, Alpha:0.6},{Shape:'Diamond', resolution: -, Size: the, offset:8, Alpha:0.6} HTML5 Canvas picture mosaic effect-9{shape:'Square', resolution: -},{Shape:'Diamond', resolution: A, Size:8},{Shape:'Diamond', resolution: A, Size:8, offset:6This address: http://www.htmleaf.com/html5/html5-canvas/201502021314.html

HTML5 Canvas Create picture mosaic effect Plugin