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

This article introduces the knowledge of "how to set the size of pictures forwarded by Mini Program". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. To create the front end of the Canvas canvas to crop the picture, we must first think of using Canvas, write H5 like this, of course, WeChat Mini Programs is also the same.

Of course, the canvas we are going to use cannot be displayed directly on the page, so we can hide it with a negative positioning value.

two。 Download network pictures

We can use wx.downloadFile () to download web images, or we can use wx.getImageInfo (), because we need to get the width and height of the image here, so we need to use wx.getImageInfo () to download the image.

Wx.getImageInfo ({src: ", / / fill in the network image path success: (res) = > {/ / this is the image clipping method I encapsulated (we will talk about below) clipImage (res.path, res.width, res.height, (img) = > {console.log (img); / / img is the image path generated after the final cropping, which we can use as the forwarding cover image});}); 3. Crop the picture and export the following pictures that I encapsulated specifically for cropping pictures with a scale greater than 5:4 by capturing the middle part of the picture (of course, you can also try to write down pictures that crop less than 5:4):

/ * cropped cover, src is the local image path or temporary file path, imgW is the width of the original image, imgH is the height of the original image, and cb is the callback function after successful cropping * / const clipImage = (src, imgW, imgH, cb) = > {/ / 'canvas' is the canvas-id attribute value let ctx = wx.createCanvasContext (' canvas') of the previously created canvas tag; let canvasW = 640, canvasH = imgH If (imgW / imgH > 5 / 4) {/ / aspect ratio is greater than 5:4canvasW = imgH * 5 / 4 } / / drawing a picture to the canvas ctx.drawImage (src, (imgW-canvasW) / 2,0, canvasW, canvasH, 0,0, canvasW, canvasH) / / draw () is required And you need to export the picture ctx.draw (false, () = > {setTimeout () = > {/ / export the picture wx.canvasToTempFilePath ({width: canvasW,height: canvasH,destWidth: canvasW,destHeight: canvasH,canvasId: 'canvas',fileType:' jpg',success: (res) = > {/ / res.tempFilePath is the exported image path typeof cb = = 'function' & cb (res.tempFilePath)) }}), 1000);})} "how to set the size of Mini Program retweet pictures" is introduced here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.