Written in the book of the former

This sharing is a canvas – based update of the picture effect implementation. It mainly involves the use of canvas getImageData(), putImageData() and toDataURL() methods. See the effect below. Welcome to pay attention to my blog, irregularly updated —

PS: Please open the page in the local server, because there will be cross-domain problems in Google Browser, if you need node static server can refer to this address

Results the preview

Click me to view the source repository

The implementation process

  • Click the skin button to draw an empty canvas canvas in equal proportions at the corresponding position of the target image
  • Render the image as waves on the canvas
  • Convert the canvas to an image

Draw the Canvas overlay

1. Obtain the size of the base map, that is, the target map

Var img = new Image() img.src ='xxx'
img.onload = function() {$('.btn').click(function() {... var that = this var imgSize = { realHeight: that.height, realWidth: that.width } changeImg(imgSize, img) }) }Copy the code

2. Draw the canvas to the same position

var changeImg = function(imgSize, oldImg) {
  var img = $(oldImg),
      offset = img.offset(),
      imgLeft = offset.left,
      imgTop = offset.top,
      canvasId = 'canvas'
  $('body').append('<canvas id='+ canvasId +' width='+ imgSize.realWidth+' height='+ imgSize.realHeight +'></canvas>'The $()The '#'+ canvasId).css({
    'position': 'absolute'.'left': imgLeft,
    'top': imgTop,
    'z-index': 1})... }Copy the code

Render the image as a wave

Let’s start with the getImageData() and putImageData() methods

CanvasRenderingContext2D. GetImageData () returns a ImageData object, used to describe the canvas area implied pixel data, this area through the rectangles represent, the starting point for sw for (sx, sy), wide, high for sh.

CanvasRenderingContext2D. PutImageData () is a 2 d Canvas API data from existing ImageData draws a bitmap object.

The key here is what an ImageData object is. Let’s print it out:


It can be seen that a 2-by-2 canvas occupies 4 pixels, in which a 16-length one-dimensional array is printed. According to the explanation in the document, we can know that each pixel has 4 bits respectively rGBA, so through getImageData() we can get a flat RGBA array. So when we change something dynamically the color opacity of the entire image will change accordingly, which is a little exciting to think about. PutImageData () is also easy to understand. When we change the pixel value, we feed it back to the canvas.

ImgData = content.getimageData (0, 0, width, height) var imgData = content.getimageData (0, 0, width, height)for(var i = 0; i < width / 10; I +=0.1) {x= math.round (I *10) y= math.round (math.sin (i-t) * scale + initYfor(var k = 0; k < y; K ++) {var sym = x * 4 + k * width * 4 Imgdata. data[sym + 3] = 0 // imgdata. data[sym + 3] = 0 // imgdata. data[sym + 3] = 0 // imgdata. data[sym + 3] = 0 content.putImageData(imgData, 0, 0, 0, 0, width, height)Copy the code

In this equation, initY is the ordinate position of sin curve. When the iniY is dynamically reduced, the rendering curve will move upward a little while the transparent area will become smaller. Changing the t value will make the curve move horizontally, thus forming the final wavy shape and gradually moving upward.

Convert the canvas to an image

oldImg.src = oCanvas.toDataURL('image/png')
$(oCanvas).remove()Copy the code

The toDataURL() method can be used to convert the canvas into a Base64 img image, which can be replaced by the URL of the old image to achieve the update effect of the image.

The last

Routine Po author’s blog, update from time to time – welcome to exchange issues, cover your face for star=. =