Shulou(Shulou.com)06/01 Report--

This article is about how to use canvas to flip images in html. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Flip through the canvas method that comes with canvas

Var img = new Image (); / / this is the dom object of the img tag img.src ='. / sy.png'; img.onload = function () {/ / after the picture is loaded, execute this method ctx.drawImage (img, posx, posy, 210,80);}; play.addEventListener ('click', function () {ctx.clearRect (0,0, canvas.width, canvas.height)) / / clear canvas / / shift to mirror flip ctx.translate (210 + posx * 2,0); ctx.scale (- 1,1); / / left and right mirror flip / / ctx.translate (0,160 + posy * 2); / / ctx.scale (1,-1); / / up and down mirror flip ctx.drawImage (img, 0,0210,80);})

two。 Image flipping method of Pixel

/ / Vertical pixel inversion function imageDataVRevert (sourceData, newData) {for (var I = 0, h = sourceData.height; I < h; iPixel +) {for (var j = 0, w = sourceData.width; j < w; jpixel +) {newData.data [I * w * 4 + j * 4 + 0] = sourceData.data [(h-I) * w * 4 + j * 4 + 0] NewData.data [I * w * 4 + j * 4 + 1] = sourceData.data [(h-I) * w * 4 + j * 4 + 1]; newData.data [I * w * 4 + j * 4 + 2] = sourceData.data [(h-I) * w * 4 + j * 4 + 2] NewData.data [I * w * 4 + j * 4 + 3] = sourceData.data [(h-I) * w * 4 + j * 4 + 3];}} return newData;} / / Transverse Pixel inversion function imageDataHRevert (sourceData, newData) {for (var I = 0, h = sourceData.height; I < h; iPixel +) {for (j = 0, w = sourceData.width; j < w) NewData.data [I * w * 4 + j * 4 + 0] = sourceData.data [I * w * 4 + (w-j) * 4 + 0]; newData.data [I * w * 4 + j * 4 + 1] = sourceData.data [I * w * 4 + (w-j) * 4 + 1] NewData.data [I * w * 4 + j * 4 + 2] = sourceData.data [I * w * 4 + (w-j) * 4 + 2]; newData.data [I * w * 4 + j * 4 + 3] = sourceData.data [I * w * 4 + (w-j) * 4 + 3];}} return newData;} ``var img = new Image () / / this is the dom object of the img tag img.src ='. / sy.png'; img.onload = function () {/ / after the picture is loaded, execute this method ctx.drawImage (img, 0,0210,80);}; / / Pixel operation var imgData = ctx.getImageData (0,0,210,80); var newImgData = ctx.getImageData (0,0210,80) / / var newImgData = ctx.getImageData (0,0,w, h); ctx.putImageData (imageDataVRevert (newImgData, imgData), 0,0); / / Flip up and down / / ctx.putImageData (imageDataHRevert (newImgData, imgData), 0,0); / / Flip left and right ~ Thank you for reading! On "how to use canvas in html to achieve image flipping" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.