uniapp生成海報帶二維碼及保存

生成海報不難，都知道是用canvas畫，但是在uniapp中會有一些bug，為了解決bug，下面是我的思路：

1.首先定義唯一容器，下面有image和canvas標簽，為什么這樣做呢，解決有些h5頁面canvas畫不出來，所以用image去接收並展示。

<view class="pc-container">
        <image :src="imgurl" mode="aspectFill" @longpress="saveImage"></image>
        <canvas canvas-id="mycanvas" style="width: 590rpx;height: 998rpx;" v-show="canvasShow"></canvas>
        
</view>

2.頁面中的寬高都是自己需求定義的，這樣的樣式是為了不讓canvas畫的時候在app端展現出來，也就是遮擋住canvas，也不讓頁面滾動。

image{
    width: 99%;
    min-height: 996rpx;
    border: 1px solid #BBBBBB;
        display: block;
}
.pc-container{
    width: 590rpx;
    height: 1000rpx;
    margin: 0 auto;
    padding-top: 46rpx;
    overflow: hidden;
}

3.繪畫

 data() {
 return { imgurl:'', canvasShow:true, } }, onHide() { uni.removeStorageSync('person-card'); }, mounted() { //如果本地有圖片了，直接取，解決一些頁面切換canvas沒有重畫
            if(uni.getStorageSync('person-card')){ this.canvasShow = false; this.imgurl = uni.getStorageSync('person-card'); }else{ this.canvasImage(); } }, methods: { canvasImage(){
 uni.showLoading({ title:'加載中', mask:true }) let myCanvas = uni.createCanvasContext('mycanvas', this); //畫布尺寸
                // 坐標(0,0) 表示從此處開始繪制，相當於偏移。
                //頭像
                myCanvas.drawImage('../../static/logo.png',33,44,65,65); //參數：圖片，左偏移，上偏移，寬，高
                //認證圖標
                myCanvas.drawImage('../../static/logo.png',44,117,7,7); let phone = '12456798798'; myCanvas.fillStyle = '#101010'; let fontSize = 10; myCanvas.font = `${fontSize}px Arial`;//繪制文字
                myCanvas.fillText('認證',55,124); let fontSizea = 14; myCanvas.font = `${fontSizea}px Arial`;//繪制文字
                myCanvas.fillText('姓名：  木村林',124,58); myCanvas.fillText(`手機： ${phone}`,124,76); myCanvas.fillText('專業：  木村林',124,94); myCanvas.fillText('邀請碼：  木村林',124,112); myCanvas.fillText('這是我的二維碼名片，請惠存!',49,185); //二維碼
                myCanvas.drawImage('../../static/logo.png',55,223,183,183); myCanvas.fillText('掃碼進入小程序',69,432); myCanvas.fillText('添加我的名片',103,458); //開始繪畫，必須調用這一步，才會把之前的一些操作實施
                myCanvas.draw(true,()=>{ uni.canvasToTempFilePath({ canvasId: 'mycanvas', success: (res) => { // 在H5平台下，tempFilePath 為 base64
                            this.imgurl = res.tempFilePath; this.canvasShow = false; uni.hideLoading(); uni.setStorageSync('person-card',this.imgurl); }, fail: () => { uni.showToast({ title: '名片加載失敗', duration: 2000 }); } }); }); }, saveImage(){ uni.showActionSheet({ itemList: ['保存圖片','取消'], success: (res) => { if(res.tapIndex == 0){ uni.saveImageToPhotosAlbum({ filePath: this.imgurl,// 圖片文件路徑，可以是臨時文件路徑也可以是永久文件路徑，不支持網絡圖片路徑
                                success: () => { uni.showToast({ title: '保存成功', duration: 2000 }); }, fail: () => { uni.showToast({ title: '保存失敗', duration: 2000 }); } }); } }, fail: function (res) { console.log(res.errMsg); } }); } }

4.小程序二維碼在微信小程序官方文檔里說的很清楚，需要由后台接口生成圖片地址，返給你你畫進canvas就行；

如果是其他的二維碼，你可以在uniapp插件市場去生成，取地址再畫進去。

也就是說畫二維碼其實就是畫圖，調好位置就行。

5.關於賦值給image的src這一塊兒，按理來說應該將文件上傳到服務器，再從服務器取回圖片地址賦值。

而我這里的保存屬於本地保存到相冊，請稍加注意。