微信小程序使用canvas绘制网络图片，使用canvas将图片变成圆形-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序使用canvas绘制网络图片，使用canvas将图片变成圆形。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.HTML

<canvas   id="myCanvas" type="2d" canvas-id="myCanvas"  />

2.css隐藏 canvas ，前两句是关键

#myCanvas {
  position:fixed;
  left:100%;
  /* visibility: hidden */
  /* visibility: hidden; */
   /* margin-top: 100rpx; */
margin: 68rpx auto;
width: 287px;
height: 450px;
/* line-height: 20px; */
background-color: rgba(255, 255, 255, 1);
text-align: center;
}

3.微信小程序使用canvas绘制网络图片

wx.createSelectorQuery()
            .select('#myCanvas') // 绘制的canvas的id
            .fields({
              node: true,
              size: true
            })
            .exec((res) => {
              const canvas = res[0].node
              // 渲染上下文
              const ctx = canvas.getContext('2d')
              // Canvas 画布的实际绘制宽高
              const width = res[0].width
              const height = res[0].height
              // 初始化画布大小
              const dpr = wx.getWindowInfo().pixelRatio

              //根据dpr调整
              // dpr  2 4
              //      3 6
              let   Ratio=dpr*2
              console.log("bug",dpr)
              canvas.width = width * dpr
              canvas.height = height * dpr
              //存储画布的实际大小
              this.setData({canvas:{...canvas}})
              ctx.scale(dpr, dpr)
              ctx.clearRect(0, 0, width, height)

              //背景图
              const back_image = canvas.createImage()
              // 图片加载完成回调
              back_image.onload = () => {
                // 将图片绘制到 canvas 上
                ctx.drawImage(back_image, 0, 0, canvas.width, canvas.height)
                ctx.fillStyle = 'black'
                ctx.font = 'normal bold 12px PingFangSC-regular';
                ctx.fillText(this.data.nickName, 80, 30); // ctx.fillText('微信昵称', 80, 30);
                ctx.font = 'normal 12px PingFangSC-regular';
                ctx.fillText('邀请你一起参加任务', 80, 52);
                // ctx.fillText('一起参与ta发布的任务吧~', 80, 70);

                //店铺名称
                ctx.font = 'normal bold 12px PingFangSC-regular';
                ctx.textAlign = "center";
                ctx.fillText(this.data.options.name, canvas.width/Ratio, 260); //canvas设置文字居中，宽度为画布宽度的一半  
        

                //长按二维码
                ctx.font = '10px PingFangSC-regular';
                ctx.fillStyle = '#999999';
                ctx.fillText('长按识别查看任务', canvas.width/Ratio, 440);
              }
              back_image.src = '/public/img/back.jpg'; //背景图
              
              //用户图片
              const image = canvas.createImage()
              image.onload = () => {
                ctx.drawImage(image, 30, 18, 40, 40)
              }
              // image.src = '/public/img/wechar_1.png'
              console.log("展示",this.data.headimgUrl)  
              image.src=this.data.headimgUrl //app?.globalData?.wxUser.headimgUrl

              //商家图片
              const shopImage = canvas.createImage()
              shopImage.onload = () => {
                ctx.drawImage(shopImage, canvas.width/Ratio-230/2, 88,230,140)
              }
              shopImage.src =this.data.options.brandHeaderPic  //'/public/img/wechar_1.png'

              //二维码图片
               coderImage.src = this.data.options.shareQrcode  //'/public/img/cord.jpg';
              const coderImage = canvas.createImage()
              coderImage.onload = () => {
                ctx.drawImage(coderImage, canvas.width/Ratio-120/2 , 300, 120, 120)
              }
             

    
   // 绘制完成后存储路径
   
    setTimeout( ()=> {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width:  this.data.canvas.width,
        height: this.data.canvas.height,
        //  destWidth: this.data.canvas.width * 2,//生成图片的大小设置成canvas大小的二倍解决模糊
        //  destHeight: this.data.canvas.height* 2,
        //canvasId: 'myCanvas',
        canvas,
        success: (res)=> {
          var tempFilePath = res.tempFilePath;
          console.log("数据是",res)
         this.setData({
            imagePath: tempFilePath
          });
          // console.log("app变量",app)
          // wx.hideToast();
          console.log('canvas图片地址：' + this.data.imagePath);
        }
      });
    }, 600);

            })

以上的写法会造成某些图标无法绘制上去，解决方法是在网络图片中不断嵌套，先绘制大图片，再绘制小图片的顺序

 //二维码图片
               coderImage.src = this.data.options.shareQrcode // 网络url地址
              const coderImage = canvas.createImage()
              coderImage.onload = () => {
                ctx.drawImage(coderImage, canvas.width/Ratio-120/2 , 300, 120, 120)
                
                // 嵌套下一次绘图
               shopImage.src =this.data.options.brandHeaderPic  
               const shopImage = canvas.createImage()
                 shopImage.onload = () => {
                ctx.drawImage(shopImage, canvas.width/Ratio-230/2, 88,230,140)
                  }
              

              }

网上说使用先下载到本地，再使用img.src加载，我尝试过还是不行

4.使用canvas将图片变成圆形

长用在海报，需要将用户的头像画到canvas图片上，如: 微信小程序canvas绘制网络图片,微信小程序,微信小程序,javascript,前端


 wx.createSelectorQuery()
      .select('#myCanvas') // 在 WXML 中填入的 id
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const canvas = res[0].node
        // 渲染上下文
        const ctx = canvas.getContext('2d')
        //用户图片
              const image = canvas.createImage()
              image.src = this.data.headimgUrl //app?.globalData?.wxUser.headimgUrl
              image.onload = () => {
                ctx.arc(50, 38, 20, 0, 2 * Math.PI) // 将图片绘制到圆上
                ctx.fill(); //填充背景
                ctx.clip() 
                ctx.drawImage(image, 30, 18, 40, 40)
              }})