canvas生成图片

canvas生成图片

结构
注意不要用v-if控制显示隐藏，canvas在dom被删除后在显示时画布上的内容会消失

<div class="mask_operation" v-show="cvsshow">
            <div class="cvs-box">
                <canvas id="mycvs" v-show='false' ref="cvs" width="600" height="738"></canvas>
                <img :src="cvsimg" alt="">
            </div>
            <div class="savebtn" @click="saveImg">长按保存到手机相册</div>
            
        </div>

js
注意：canvas 调用cvs.toDataURL("image/png");生成图片常见的坑
绘制的图片在画布上不显示：
原因：绘制路径时图片还未加载完，要在 img.onload 函数内绘制路径

画布绘制完成显示正常，生成图片时失败，或生成的图片只有文字
原因：canvas生成图片时会有各种图片跨越的报错
解决方法：
1.给img标签加上crossOrigin属性,默认值为anonymous，元素的跨域资源请求不需要凭证标志设置

              let img = new Image()
              img.src = imgsrc
              img.crossOrigin = ""

2.将图片转为base64格式，（这个可以请后台人员给个转换的接口）

 this.$http.get('https://ssl2.xxxxx.net/qr_code/index/getImgBase?url='+imgsrc).then((res)=>{
    
 })

// 生成活动图片
           createdImg(){
               let imgsrc = this.goodsList[this.user_index].img_url
               
               this.maskShow = false
               this.cvsshow = true
               let cvs = this.$refs.cvs
               let ctx=cvs.getContext("2d"); //获取画布2d对象
               var ratio =  this.getPixelRatio(ctx);
               // cvs.width = canvas.width * 2
               // cvs.height = canvas.height * 2;
               ctx.fillStyle="#fff"
               ctx.fillRect(0,0,300*2,369*2)
               ctx.save()
               ctx.beginPath();

               ctx.font = "30px Arial"
               ctx.fillStyle="#EB4E3F";
               ctx.textBaseline='middle'
               ctx.fillText("邀您一起淘好物",75*2,51*2);

               ctx.font = "24px Arial"
               ctx.fillStyle = "#EB4E3F"
               ctx.textBaseline = "bottom"
               ctx.fillText('￥',15*2,325*2)

               ctx.font = "48px Arial"
               ctx.fillStyle = "#EB4E3F"
               ctx.textBaseline = "bottom"
               ctx.fillText('208',27*2,328*2)

               ctx.font = "24px Arial"
               ctx.fillStyle = "#999999"
               ctx.textBaseline = "bottom"  
               let pp = 360
               ctx.fillText('￥360',72*2,325*2)

               ctx.fillText('卡云亲子乐园',15*2,355*2)
               ctx.save()
               ctx.beginPath();
               
               ctx.lineWidth = 0.3;
               ctx.moveTo(72*2,318*2)
               ctx.lineTo(112*2,318*2)
               ctx.stroke()

               ctx.fillStyle="#999";
               ctx.font = "24px Arial"
               ctx.textBaseline='middle'
               ctx.fillText("-长按识别小程序码-",186*2,356*2);
               
               //这里是后台提供的一个借口，将网络图片转为base64
               this.$http.get('https://ssl2.xxxxx.net/qr_code/index/getImgBase?url='+imgsrc).then((res)=>{
                   imgsrc = res.data.data
                   let img = new Image()
                   img.src = imgsrc
                   img.crossOrigin = ""
                   
                   //确保图片已完成加载在绘制路径
                   img.onload = ()=>{
                       ctx.arc(35*2,40*2,25*2,0,2*Math.PI);
                       ctx.strokeStyle="#BFBFBF";
                       // ctx.stroke();
                       ctx.clip();
                       ctx.drawImage(img,10*2,15*2,50*2,50*2)
                       ctx.restore()

                       let img2 = new Image()
                       img2.src = imgsrc
                       img2.crossOrigin = ""
                       img2.onload = ()=>{
                           ctx.drawImage(img2,0,75*2,300*2,168*2)
                           let img3 = new Image()
                           img3.src = imgsrc
                           img3.crossOrigin = ""
                           img3.onload = ()=>{
                               ctx.drawImage(img3,192*2,246*2,93*2,93*2)
                               this.cvsimg = cvs.toDataURL("image/png");
                           }
                       }
                       
                   }
               })

               
               

           }