canvas图片画圆角

冷不防 2023-01-11 08:52 248阅读 0赞

获取屏幕比率

有的手机屏幕实际分辨率的像素比页面过去的尺寸像素要大，一遍是一倍或者两倍

var getPixelRatio = function(context) {
      var backingStore = context.backingStorePixelRatio ||
          context.webkitBackingStorePixelRatio ||
          context.mozBackingStorePixelRatio ||
          context.msBackingStorePixelRatio ||
          context.oBackingStorePixelRatio ||
          context.backingStorePixelRatio || 1;
      return (window.devicePixelRatio || 1) / backingStore;
    };

初始化canvas

var canvas = document.createElement('canvas')//画布
    var ctx = canvas.getContext("2d"); 
    var ratio = getPixelRatio(ctx); // 获取屏幕比率
    canvas.width = 750*ratio; // 设置生成图片容器的宽高
    canvas.height = 1335*ratio; 
    ctx.clearRect(0,0,canvas.width,canvas.height); // 设置背景颜色
    ctx.fillStyle = '#000000';
    ctx.fillRect(0,0,canvas.width, canvas.height);

画矩形图片+圆角

/*
         *  参数说明
         *  ctx Canvas实例
         *  img 图片地址
         *   x  x轴坐标
         *   y  y轴坐标
         *   w  宽度
         *   h  高度
         *   r  弧度大小
         */
        drawRoundRect(ctx, r, x, y, w, h, img) {
          ctx.save();
          if (w < 2 * r) r = w / 2;
          if (h < 2 * r) r = h / 2;
          ctx.beginPath();
          ctx.moveTo(x + r, y);
          ctx.arcTo(x + w, y, x + w, y + h, r);
          ctx.arcTo(x + w, y + h, x, y + h, r);
          ctx.arcTo(x, y + h, x, y, r);
          ctx.arcTo(x, y, x + w, y, r);
          ctx.closePath();
          ctx.clip();
          ctx.drawImage(img, x, y, w, h);
          ctx.restore(); // 返回上一状态
        },

圆形头像

/*
         *  圆角图片=>参数说明
         *  ctx Canvas实例
         *  img 图片地址
         *   x  x轴坐标
         *   y  y轴坐标
         *   r  圆形半径
         */
        circleImg(ctx, img, x, y, r) {
          ctx.save();
          var d = 2 * r;
          var cx = x + r;
          var cy = y + r;
          ctx.arc(cx, cy, r, 0, 2 * Math.PI);
          ctx.clip();
          ctx.drawImage(img, x, y, d, d);
          ctx.restore();
        },

导出生成头像链接

导出的数据为base64的图片链接，可以赋值到需要展示的图片上，这样就能实现图片合成的效果了

var imgData = canvas.toDataURL()