Shulou(Shulou.com)05/31 Report--

This article mainly introduces the Mini Program picture clipping plus rotation method related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this Mini Program picture clipping plus rotation method article will have a harvest, let's take a look.

There is no doubt that canvas is used for photo clipping, but students who have developed Mini Program should know some of the pitfalls of Mini Program canvas. For example, Mini Program canvas cannot adjust the size of the canvas on mobile phones through css style as web's canvas does, and canvas cannot be set too large because it may cause Mini Program to crash on some Android computers, canvas drawing too large pictures will make Mini Program very stuttered, and so on.

Most of the picture clipping frames that can be found on the Internet draw pictures directly on the canvas, and then control the movement and rotation of the pictures by monitoring the user gestures on the canvas. In this way, the pictures will be blurred because the canvas is too small. One solution is to place a hidden canvas on the page that is twice the original size or a little larger that can be used as the canvas for the actual clipped image, of course, the clipping data comes from the first canvas. However, there are still some minor problems, that is, the problem of stutter will occur when canvas draws large pictures. This kind of solution has to constantly redraw canvas when monitoring changes in user gestures, and the stutter becomes more serious and the experience is very bad.

Based on the above reasons, I use view to place images, monitor gestures on view, control the rotation, scaling and movement of images through css style, and finally clip with hidden canvas. Take a look at the page layout first:

Select picture rotation clipping

The most important operation is how the position change in the picture in view is consistent in canvas and then clipped out, the picture is relative to the upper-left coordinates in view, the length and width of the picture are all known, and the rotation value is calculated through user gesture changes. When rotating, move the center of the canvas to the center of the picture and then rotate it.

Let ctx = wx.createCanvasContext ('imgcrop',this); let cropData = _ this.data.stv; ctx.save (); / / scale offset let x = (_ this.data.originImg.width-_ this.data.originImg.width * cropData.scale) / 2; let y = (_ this.data.originImg.height-_ this.data.originImg.height * cropData.scale) / 2 / / transfer the canvas midpoint coordinates to the center of the picture let movex = (cropData.offsetX + x) * 2 + _ this.data.originImg.width * cropData.scale; let movey = (cropData.offsetY + y) * 2 + _ this.data.originImg.height * cropData.scale; ctx.translate (movex, movey); ctx.rotate (cropData.rotate * Math.PI / 180); ctx.translate (- movex,-movey) Ctx.drawImage (_ this.data.originImg.url, (cropData.offsetX + x) * 2, (cropData.offsetY + y) * 2, _ this.data.originImg.width * 2 * cropData.scale, _ this.data.originImg.height * 2 * cropData.scale); ctx.restore (); this is the end of this article on "Mini Program photo clipping and rotation". Thank you for reading! I believe you all have a certain understanding of the knowledge of "Mini Program photo clipping and rotation method". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.