多张图文利用canvas生成图片模糊（已解决）

原创

安生_02 2022-01-12 17:39:01 博主文章分类：前端相关手记 ©著作权

文章标签 canvas绘图模糊 canvas 缩放二维码用户名 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者安生_02的原创作品，请联系作者获取转载授权，否则将追究法律责任

最近在搞分享，希望能点击分享按钮，生成卡片，卡片信息含商品图片、商品名、商品价格、用户名、本商品二维码、logo。

具体的参数是后台传给我，所以，我只做接收到参数后的处理。

HTML中，绘制卡片用canvas标签，但真正起到作用的，是JS对canvas的控制。

思路：

1.点击“分享”按钮（此时发送请求，获取所需要的参数：商品图片、商品名、商品价格、用户名、本商品二维码）

2.将获取到的图片参数放在一个dataImg数组中

3.draw函数

具体JS代码如下：

var dataIMG=[sharePImage,sharecode,'logo.png'],base64=[];
function draw(fn){
  var canvas=document.createElement('canvas'),
  ctx=canvas.getContext('2d');
  len=dataIMG.length;
  canvas.width=300;
  canvas.height=600;
  ctx.fillStyle="#fff";
  ctx.rect(0,0,canvas.width,canvas.height);
  ctx.fill();
  function drawing(n){
     if(n<len){
         var img=new Image;
          //img.crossOrigin = 'Anonymous'; //解决跨域
          img.src=dataIMG[n];
          img.onload=function(){
               if(n==0){
                   ctx.drawImage(img,0,0,canvas.width,canvas.height / 1.6);
               }else if(n==1){
                   ctx.drawImage(img,150,450,125,125);
               }else{
                    ctx.drawImage(img,20,465,90,90);
               }
               drawing(n+1);//递归
             }
          }else{
           //保存生成作品图片
           base64.push(canvas.toDataURL("image/png",0.8));
           fn();
         }

        ctx.fillStyle = '#333';   // 文字填充颜色
        ctx.font = '15px Adobe Ming Std';
        var shareTitleText = sharetitle;
        var textWidthA = ctx.measureText(shareTitleText).width;
        if(textWidthA > 200){
            var shareTitleB = shareTitleText.substring(0,12);
            ctx.fillText(shareTitleB + "…",15,400);
        }else{
            ctx.fillText(shareTitleText,15,400);
        }

        ctx.fillStyle = '#333';
        ctx.font = '14px Adobe Ming Std';
        ctx.fillText(shareprice,15,420);//数字第一个左右，第二个上下
        ctx.fillStyle = '#333';
        ctx.font = '13px Adobe Ming Std';
        var shareNameText = sharename;
        var textWidthB = ctx.measureText(shareNameText).width;
        if(textWidthB > 20){
            var shareNameB = shareNameText.substring(0,3);
            ctx.fillText(shareNameB + "…",20,570);
         }else{
             ctx.fillText(shareNameText,20,570);
         }
       }
        drawing(0);
     }