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

最近在搞分享，希望能点击分享按钮，生成卡片，卡片信息含商品图片、商品名、商品价格、用户名、本商品二维码、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);
     }       

这个代码有一部分关于文字超出后的处理，我没有封装成一个函数进行调用，这个将会进行优化，暂且不提。

用这个生成图片并不清晰，真正让整张图清晰起来的是另一个CSS属性“缩放“：

    transform: scale(0.6,0.6);

这个是缩放了0.6倍，

也能针对生成的img卡片进行缩放，但会在样式上造成混乱，所以，我在生成的图片外部包了一个div，对这个div进行缩放0.6倍，或者根据所需进行缩放吧，外部div的width：100%;

其他CSS代码就不放出来了，今天下午关于canvas的学习又加深了许多，继续努力吧~

明儿更新小程序canvas绘图