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')
                })
            })