vue把几张图片logo。二维码。背景合成一个海报并下载，使用canvas

客官°小女子只卖身不卖艺 2022-09-08 11:58 196阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5aSP5aSp5oOz_size_8_color_FFFFFF_t_70_g_se_x_16][]

data() \{

return \{

logoimg:'',//logo图片

ctx:'',

qrBase64:'',//二维码地址

> //点击下载按钮访问
> 
> downloadposterPicture()\{  
>          var canvas = document.createElement('canvas');  
>         this.ctx = canvas.getContext('2d');  
>           
>          canvas.width =750 ;  
>          canvas.height =1624 ;  
>            
> 
> //使用箭头函数解决this烦人指向问题  
>             this.drawImg('/static/api/img/share/posterbg.png','bg',0,0,750,1624,()=>\{  
>                 this.drawImg(this.logoimg,'logo',43,30,120,120,()=>\{  
>                     this.drawImg(this.qrBase64,'qr',200,1090,367,367,()=>\{  
>                         this.fileDownload(canvas.toDataURL(), "海报.jpg");  
>                         // console.log(canvas.toDataURL())  
>                     \})  
>                 \})  
>             \})  
>     \},  
>     // 绘制图片  
>      drawImg(src,type,left,top,width,height,fun)\{  
>       var img=new Image();      
>       img.crossOrigin = 'Anonymous'; // 重点！设置image对象可跨域请求  
>       img.οnlοad=()=>\{      
>           this.ctx.drawImage(img,left,top,width,height);      
>           fun&&fun();      
>       \};  
>    
>         img.src =src+ "?timeStamp=" + new Date().getTime(); //解决缓存引起访问失败需要添加            
>     \},  
>    //下载二维码  
>     createPicture() \{  
>       let domObj = document.getElementById("poster-qr");  
>       html2canvas(domObj, \{  
>         backgroundColor: null,  
>       \}).then((canvas) => \{  
>         var imgData = canvas.toDataURL("image/jpeg");  
>         this.fileDownload(imgData, "二维码.jpg");  
>       \});  
>     \},

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5aSP5aSp5oOz_size_8_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/e4458660673c4cf599c3fe492d9abcff.png