Today, when I added text watermarking to the same picture with different resolutions in wechat mini program, I found that only the picture with the highest resolution could be successfully watermarked. I spent a long time looking for bugs and shared them

Ctx. filltext (' productName '+' + this.data.productname, 10, 460) // Position ctx.fillText(' resolution his.data. ProductName, 10, 480 // Watermark content, position ctx.fillText(' Figure size this.data. ProductName, 10, 500 // Watermark content, positionCopy the code

why

CanvasContext.fillText(string text, number x, number y, Number x in number maxWidth,number y refers to the x-y position in the upper left corner of the drawing text rather than the x-y position of the photo, as shown in the figure

When we change the resolution, the image size changes, as shown in the figure

Solutions:

Use the success callback function to get the ress.width and ress.height of the current image, and calculate the current width and height as a percentage of the highest resolution, based on the original X and Y distance *

Wx.getimageinfo ({SRC: res.tempimagepath, success: (ress) => {const hg = ress.height / 1719; const wd = ress.width / 1080; Ctx.filltext (' productName '+' + this.data.productName, 10 * wd, 460 * hg) // watermark content, positionCopy the code