uniapp 保存海报

思路: 用htmlCanvas把 海报内容 绘制成图片 ,生成后弹窗展示图片,长按触发系统的保存

先 npm install --save html2canvas

//保存按钮

                保存到相册
            


//需要绘制成图片的内容

         自定义内容  
   



//弹窗  

            
                    //生成的图片
                    
              
                    
                 /*   
                        长按保存图片到相册
                      */
    





/*JS部分*/


//引入 html2canvas
import html2canvas from 'html2canvas'


//生成图片
convert2canvas() {
                let shareContent = document.getElementsByClassName('post')[0];
                let opts = {
                    useCORS: true
                };
                html2canvas(shareContent, opts).then((canvas) => {
                    let imgSrc = canvas.toDataURL('image/png')
                    this.canvasImg = imgSrc
                    this.show=true
                });
            },

你可能感兴趣的:(uniapp,javascript)