Method for implementing picture mosaic using Canvas

This article shared the content of the method of using Canvas to implement picture mosaic. Xiaobian feels quite practical, so share it with you to do a reference. Let’s take a look at Xiaobian.

1. API

1) GetContext (CONTEXTID) — returns a environment for drawing on canvas

 CANVAS.GETCONTEXT ('2D') // Returns a CanvasRenderingContext2D object, using it can be drawn into the canvas element   
2) DrawiMage

DrawImage (imgobj, x, y) // Draw, X, Y is the location coordinate DrawImage (IMGOBJ, X, Y, Width, Height) // specified width and height plotted drawImage (imgObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) // one image from the original starting position (sourceX, sourceY), the specified length and width to shear (sourceWidth, sourceHeight ), Then place the shear content to position (DESTX, DESTY), the width (Destwidth), the height (DESTHEIGHT)

使用canvas实现图片马赛克的方法 3) GetImageData (X, Y, Width, Height) – Receive image information of the rectangular area

CTX.GetImageData (0, 0, 10, 10) // Get the upper left corner coordinateTo (0, 0), the image information in the region // returns imagedata: {Width: 10, Height: 10, Data: uint8clampedArray [400]}
4) Beginpath () — Start a path, or reset the current path 5) Rect (x, y, width, height) – Draw a rectangle

6) LineWidth — Set or return the current line Width

7) FillStyle — Set or return color, gradient or mode for filling painting

CTX.FillStyle = Color | Gradient | Pattern
  8) StrokeStyle --- Set or return color, gradient, or mode for bricks, gradient, or mode  
9) GlobalPha — Set or return to the current transparent value of the drawing

10) Fill () — Pack the current image (path). The default color is black


If the path is not closed, then the fill () method adds a line from the path end point to the start point to close the path, then populate This path.

11) stroke () — will actually draw the path defined by MoveTo () and LINETO () methods. The default color is black

12) TodataURL (Type, EncoderOptions) — Export image, type is image type, EncoderOptions picture quality, [0, 1]

Canvas.TodataURL (“image / png”, 1)

2. Fabric.js
   Simplify the library written by Canvas, providing the lack of object model for Canvas 

1) Create, fill graphics on CanvaS ( Included pictures, text, rule graphics, and complex path composition graphic)

2) Filled gradient color

3) combined graphics (including combined graphics, graphics, pictures, etc.)

4) Set graphics animation set user interaction

5) Generate JSON, SVG data, etc.

3. API

1) implemented using Fabric.js Declaration

Let Canvas = New Fabric.canvas (‘canvas’) {Width: 200, Height: 200}

Insert picture

Let Imginstance = New Fabric.Image (Imgelement, {Left: 0, TOP: 0, Width: 100, Height: 100, Angle: 0}
3) Set BackbackgroundImage

   4) Renderall () re-draw 
5) ON () User Interaction

Canvas.on (‘Mouse: Down’, Function (options) {Console.log (options.e.clientx, Options.e .clienty)}) // Listening event / * mouse: down: Mouse Press MOUSE: MOVE: Mouse Mouse Mouse: Up: Mouse Lift After: Render: Canvas Redraw Object: SELECTED: Objects Object: Moving: Object Move Object: Rotating: Object is rotated Object: added: Object is added to Object: Removed object is removed * /
6) getPointer ()

7) SetWidth (), setHeight () sets the width of Canvas

8) Painting rectangles

  Let RECT = New Fabric.Rect ({Left: 0, TOP: 0 , Width: 100, Height: 100}  Add (obj) Add graph 

canvas.add (REC)

10) Remove (OBJ) Removing Graph

11) Set () Sets Object Content
  12) TodataURL (OBJ)  
4. Native Canvas Realization Code

Add text



Export picture

Your browser is tooLow

Export Default {data () {Return {Context: ‘, canvas:’ ‘, ISMASIC: False, ISTEXT: FALSE, ISTAILOR: FALSE, ISTRANSLATE: FALSE, SQUAREDGELENGTH: 20, Angle: 0, IMG: ” ‘}}, mounted () {this.initdata ()}, methods: {initdata () {let imgcontent = this. $ Refs.imgcontent this.canvas = imgcontent this.context = IMGCONTENT .getContext ( ‘2d’) let Img = new Image () this.image = Img Img.crossOrigin = “Anonymous” img.src = ‘’ this .canvas.setttribute (‘width’, img.width) this.canvas.setttribute (‘Height’, IMG.Height) Let self = this img.onload = () => {let beginx, beginy, endx, endy self.context.drawimage (img, 0, 0) () Self.canvas.AddeventListener (‘mousedown ‘, E => {beginx = E.OffsetX beginy = E.OffSety self.canvas.addeventListener (‘ mouseup ‘, e => {ENDX = E.Offsetx endy = E.OffSety if (self.ismasic) {Self.makegrid (Beginx, Beginy, Endx – Beginx, Endy – Beginy) Return} IF (Self.istail) {Self.Context.drawImage (IMG, Beginx, Beginy, Endx – Beginx, Endy – Beginy, 0, 0, Endx – Beginx, Endy – beginy) Return}})})}}, DrawRect (x, y, width, height, fillStyle, lineWidth, strokeStyle, globalAlpha) {this.context.beginPath () this.context.rect (x, y, width, height) this.context.lineWidth = lineWidth this.context.strokeStyle = strokeStyle fillStyle && (this.context.fillStyle = fillStyle) globalAlpha && (this.context.globalAlpha = globalAlpha) this.context.fill () this.context.stroke ()}, // play mosaic mosaic () {let self = this this.resetClickStatus () this.isMasic = true}, makeGrid (beginX, beginY, rectWidth, rectHight) {const row = Math.round (rectWidth / this.squareEdgeLength) + 1 const column = Math. Round (Recthight / this.squareEdGelength) + 1 for(Let i = 0; i
  .Operations {width: 1200px; margin: 0 auto; ul {display: flex; align-items: center; margin-bottom: 30px; li {list-style: none Margin-Right: 20px; Cursor: Pointer;}}}. IMG-Wrap {Display: block; margin: 0 auto;}  

  • Thank you for reading! About Use Canvas to implement picture mosaic method to share here, I hope that the above can help everyone, let everyone learn more knowledge. If the article is good, you can share it out to let more people see it. Let's!
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment