uniApp用canvas实现小程序保存分享页面&二维码到本地

明日之后

[JavaScript] 纯文本查看 复制代码

//前端页面设置一个画布，并隐藏起来
<canvas canvas-id="myCanvas" :style="'width:'+windowWidth+'px;height:'+windowHeight+'px;position:absolute;op:-9999px;left:-9999px;'"/>

[JavaScript] 纯文本查看 复制代码

//分享按钮的兼容方法

shareWeiXin(scene){

        //#ifdef MP

        // console.log("小程序端")

        this.saveImage()

        //#endif

        

        //#ifdef APP-PLUS

        let _this = this

        let sc = scene

        _this.capture(sc)

        //#endif

},

//小程序端保存图片

saveImage(){

        // console.log("ok")

        uni.showLoading({

                title: '图片绘制中...',

        })

        var url = '../../../../static/fxbg2.jpg'

        

        //开始绘制图片，这边主要就是canvas写法了，uniapp官方：https://uniapp.dcloud.io/api/ui/canvas?id=%E5%9C%A8canvas%E4%B8%8A%E7%94%BB%E5%9B%BE

        const context = uni.createCanvasContext('myCanvas')

        context.drawImage(url,0, 0, this.windowWidth, this.windowHeight)

        context.drawImage(this.src,this.windowWidth/2-95/2, this.windowHeight/2,95,95)

        context.drawImage("../../../../static/fxb1.jpg",(this.windowWidth-251)/2,7*(this.windowHeight/8),78,24)

        context.drawImage("../../../../static/fxb2.jpg",(this.windowWidth-251)/2+88,7*(this.windowHeight/8),78,24)

        context.setFontSize(14)

        context.setFillStyle("#FEEDBB")

        context.fillText('邀请码：'+this.invitation,(this.windowWidth-251)/2+88+88,7*(this.windowHeight/8)+16)

        

        //重点：这边本来保存图片是写在draw之后，但第一次保存时空白，第二次才生效，写在draw回调里面就OK了。

        context.draw(false,function(){

                uni.canvasToTempFilePath({

                        canvasId:'myCanvas',

                        success: function(res){

                                uni.hideLoading()

                                // console.log(res.tempFilePath)

                                uni.saveImageToPhotosAlbum({

                                        filePath:res.tempFilePath,

                                        success : function(res){

                                                uni.showToast({title : '图片已保存'})

                                        }

                                })

                        }

                })

                

        })

},

q237369997

非调用网络接口！本地调用 zxing 库的二维码识别！