（小程序）canvas 绘制图片做背景（新手向）

小程序绘制图片为背景，首先我们需要把图片先下载下来（这里最好是封装一个函数，因为背景不可能只有一张的）下面是代码，一般直接复制就能使用，有可能需要微调

// 获取图片信息getImageInfo(image) {    return new Promise((req, rej) => {    uni.getImageInfo({     src: image,     success: function (res) {     req(res);    },   }); });},// 使用方法let headerPhtot = await this.getImageInfo(this.userInfo.avatarUrl);// 这里会返回一个对象 path是图片地址(返回一个本地文件 Http://开头)就可以在canvas ctx.drawImage使用let top = 0;let left = 0;let canvasW = 200;let canvasH = 200;ctx.drawImage(headerPhtot.path, left, top, canvasW, canvasH);//裁剪图片使用let shareBg = this.getAspectFillModelInfo(this.brickUrlData.width, this.brickUrlData.height, 68, 91, 613, 992);ctx.drawImage(this.brickUrlData.path, shareBg.dx, shareBg.dy, shareBg.dw, shareBg.dh, shareBg.sx, shareBg.sy, shareBg.sw, shareBg.sh); // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)// 裁剪图片getAspectFillModelInfo(oWidth, oHeight, x, y, width, height) {  // 高比宽大 宽是短边  let aspect = oHeight / oWidth;  let sw = width;  let sh = aspect * sw;  let dx = 0;  let dy = (oHeight - height * (oHeight / sh)) / 2;  let dw = oWidth;  if (aspect < 1) {    // 高比宽小 高是短边    aspect = oWidth / oHeight;    let scale = aspect * height; // 宽度比例    sh = height;    sw = width; //11440    dw = (width / scale) * oWidth;    dy = 0;    dx = (oWidth - width * (oWidth / scale)) / 2;  }  return {    dx, // 可选。开始剪切的 x 坐标位置。    dy, // 可选。开始剪切的 y 坐标位置。    dw: dw, // 可选。被剪切图像的宽度。    dh: oHeight, //可选。被剪切图像的高度。    sx: x, // 在画布上放置图像的 x 坐标位置。    sy: y, // 在画布上放置图像的 y 坐标位置。    sw, // 可选。要使用的图像的宽度。（伸展或缩小图像）    sh, //可选。要使用的图像的高度。（伸展或缩小图像）  };},

来源地址：https://blog.csdn.net/weixin_49602763/article/details/130770139