Un petit canevas de programme génère une compression d'image d'affiche et une résolution de problèmes de distorsion

L'applet WeChat permet à la toile de dessiner des images d'affiches dans la même proportion que l'image d'origine sans distorsion pour éviter le flou

Ma scène ici est la collection QR code + image de fond de collection.

Dessiner le code QR

Le wxapp-qrcode que j'utilise pour dessiner le code QR ici, et le weapp-qrcode peuvent également être utilisés . Ils sont fondamentalement les mêmes, et le code détaillé n'est pas trop lourd. Ici, je parle principalement de canevas qui s'adaptent à différentes tailles d'écran .

onLoad: function (options) {
  const size = this.setCanvasSize() // 动态设置画布大小
  this.createQrCode('www.iyouhun.com', "mycanvas", size.w, size.h)
},
// 适配不同屏幕大小的canvas
setCanvasSize: function () {
  const size = {}
  try {
    var res = wx.getSystemInfoSync()
    var scale = 750 / 686; // 不同屏幕下canvas的适配比例；设计稿是750宽，686是因为wxss样式文件中设置的canvas大小
    var width = res.windowWidth / scale
    var height = width; // canvas画布为正方形
    size.w = width
    size.h = height
  } catch (e) {
    console.log("获取设备信息失败" + e)
  }
  return size
},
复制代码

dessiner une image de fond

Définir dynamiquement la hauteur et la largeur de l'image

Dans la disposition de l'applet, si l'image n'a pas une hauteur et une hauteur fixes, mais qu'une hauteur et une largeur fixes sont définies, et que la hauteur et la largeur fixes de l' imageimage d'origine ne sont imagepas dans des proportions égales, l'image sera déformée et modifiée. Pas clair. À ce stade, vous pouvez utiliser la méthode de mise à l'échelle proportionnelle suivante pour agrandir l'image, afin que l'image ne soit pas déformée. Ou obtenez dynamiquement la hauteur et la largeur de l'image grâce à imagela bindloadméthode, et définissez dynamiquement la hauteur et la largeur de l'image, de sorte que la hauteur et la largeur de la disposition de l'image soient égales à la hauteur et à la largeur de l'image d'origine.

Outil de mise à l'échelle des images

//Util.js 
 
class Util{ 
  /*** 
   * 按照显示图片的宽等比例缩放得到显示图片的高 
   * @params originalWidth 原始图片的宽 
   * @params originalHeight 原始图片的高 
   * @params imageWidth   显示图片的宽，如果不传就使用屏幕的宽 
   * 返回图片的宽高对象 
  ***/ 
  static imageZoomHeightUtil(originalWidth,originalHeight,imageWidth){ 
    let imageSize = {}; 
    if(imageWidth){ 
      imageSize.imageWidth = imageWidth; 
      imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth; 
    }else{//如果没有传imageWidth,使用屏幕的宽 
      wx.getSystemInfo({  
        success: function (res) {  
          imageWidth = res.windowWidth;  
          imageSize.imageWidth = imageWidth; 
          imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth; 
        }  
      }); 
    } 
    return imageSize; 
  } 
 
  /*** 
   * 按照显示图片的高等比例缩放得到显示图片的宽 
   * @params originalWidth 原始图片的宽 
   * @params originalHeight 原始图片的高 
   * @params imageHeight  显示图片的高，如果不传就使用屏幕的高 
   * 返回图片的宽高对象 
  ***/ 
  static imageZoomWidthUtil(originalWidth,originalHeight,imageHeight){ 
    let imageSize = {}; 
    if(imageHeight){ 
      imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight; 
      imageSize.imageHeight = imageHeight; 
    }else{//如果没有传imageHeight,使用屏幕的高 
      wx.getSystemInfo({  
        success: function (res) {  
          imageHeight = res.windowHeight; 
          imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight; 
          imageSize.imageHeight = imageHeight; 
        }  
      }); 
    } 
    return imageSize; 
  } 
 
} 
 
export default Util;
复制代码

Utilisation de la bibliothèque d'outils

<image bindload="imageLoad"  src="../test.png"/>
复制代码

import Util from '../common/Util'
 
Page({ 
 data:{ 
    imageWidth:0, 
    imageHeight:0 
 }, 
 imageLoad: function (e) {  
    //获取图片的原始宽度和高度 
    let originalWidth = e.detail.width
    let originalHeight = e.detail.height
    let imageSize = Util.imageZoomWidthUtil(originalWidth,originalHeight,145)
    this.setData({imageWidth:imageSize.imageWidth,imageHeight:imageSize.imageHeight})
 } 
})
复制代码

dessiner une image de fond

Utilisez la méthode ci-dessus pour définir dynamiquement la largeur et la hauteur de l'image afin de résoudre le problème de distorsion

import Util from '../../libs/Util'
// 背景图
let bgImg = new Promise(function (resolve) {
  wx.getImageInfo({
    src: 'https://www.iyouhun.com/payment/payment_pic.jpg',
    success: function (res) {
      that.setData({
        imgInfo: res
      })
      // 根据屏幕宽度得到图片高
      const imageSize = Util.imageZoomHeightUtil(that.data.imgInfo.width, that.data.imgInfo.height) 
      that.setData({ canvasHeight: imageSize.imageHeight })
      resolve(res.path)
    },
    fail: function (err) {
      console.log(err)
      wx.showToast({
        title: '网络错误请重试',
        icon: 'loading'
      })
    }
  })
})
复制代码

Code affiche/reçu synthétique

Ici, nous utilisons Promisepour dessiner respectivement le code QR et l'image d'arrière-plan.

// 收款码
let qrcodeImg = new Promise(function (resolve) {
  // ...
})
// 背景图
let bgImg = new Promise(function (resolve) {
  // ...
}
Promise.all([bgImg, qrcodeImg]).then(function(result) {
  wx.showLoading({title: '加载中'})
  // canvas绘制文字和图片，创建画图
  const ctx = wx.createCanvasContext('myCanvas')
  // 绘制背景图
  ctx.drawImage(result[0], 0, 0, that.data.imgInfo.width, that.data.imgInfo.height, 0, 0, that.data.canvasWidth, that.data.canvasHeight)
  ctx.setFillStyle('white')
  // 绘制二维码 二维码宽度300
  const qrX = (that.data.canvasWidth - 300) / 2 // canvas宽度 - 二维码宽度 / 2 (居中)
  ctx.drawImage(result[1], qrX, 120, 300, 300)
  // 绘制文本
  ctx.fillStyle = '#ffffff' // 背景
  ctx.fillRect(Math.floor(qrX),420,300,20)
  ctx.fillStyle = "#333333"
  ctx.font = 25 + 'px Arial' // 文本大小, 字体
  ctx.textAlign = 'center'
  ctx.fillText(
    'No.'+ that.data.serialNum,
    that.data.canvasWidth / 2, // 左上角 X坐标
    430, // 左上角 Y坐标
    300
  )
  //canvasToTempFilePath必须要在draw的回调中执行，否则会生成失败，官方文档有说明
  ctx.draw(false, setTimeout(function () {
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      x: 0,
      y: 0,
      width: that.data.canvasWidth,
      height: that.data.canvasHeight,
      success: function (res) {
        wx.hideLoading()
        that.setData({
          qrcodeStatus: true,
          shareImgSrc: res.tempFilePath
        })
      },
      fail: function (res) {
        wx.hideLoading()
        wx.showToast({
          title: '生成失败',
          icon: "none"
        })
      }
    })
  }, 1000))
})
复制代码

rendus