html2canvas的使用以及Cordova微信分享图片

1.截屏插件html2canvas

npm install html2canvas --save

使用

import html2canvas from 'html2canvas'
html2canvas(el,options).then(canvas=>{})

实例

           html2canvas(document.getElementById('box'),{
                backgroundColor:null,
                useCORS:true
           }).then((canvas)=>{
                this.dataURL = canvas.toDataURL("image/jpeg",1)
                console.log(this.dataURL)
           })

截取出某个div内部的样式(box)，将他们绘画成为canvas

常见问题：

1.图片不清晰：

需要将背景图片换为img图片

2.请求的数据图片加载不上

需要设置跨域

useCORS:true

3.文字不清晰：

查看百度即可

2.cordova微信分享图片

            html2canvas(document.getElementById('box'),{
                backgroundColor:null,
                useCORS:true
            }).then((canvas)=>{
                this.dataURL = canvas.toDataURL("image/jpeg",1)
                console.log(this.dataURL)
                Wechat.share({
                    message:{
                        title:'text',
                        description:'this is description',
                        thumb: "",//分享时候可以看到的图
                        media:{
                            type:Wechat.Type.IMAGE,
                            image:this.dataURL,
                        }
                    },
                    scene:Wechat.Scene.SESSION//分享到好友

                      scene:Wechat.Scene.TIMELINE//分享到朋友圈

                },()=>{
                    alert('success')
                },()=>{
                    alert('error')
                })
            })

 

标签：canvas,分享,dataURL,微信,html2canvas,Wechat,useCORS,Cordova
来源： https://www.cnblogs.com/guan-shan/p/10938994.html