uniapp canvas 保存圖片至手機(H5)

<template>
    <view>
        <canvas canvas-id="canvas4renovate":style="{ width: windowWidth + 'px', height: windowWidth * 1.77 + 'px'}" style="letter-spacing: -1rpx;" v-show="!needLongTapSaveImg"></canvas>
        <image :src="tempFilePath" :style="{ width: windowWidth + 'px', height: windowWidth * 1.77 + 'px'}" v-show="needLongTapSaveImg"></image>
        <button type="default" @click="downLoadImg()">保存至相冊</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                renovationInfo: {},
                windowWidth: 0,
                windowHeight: 0,
                tempFilePath: '',
                needLongTapSaveImg: false,
            }
        },
        onLoad(options) {
            this.renovationInfo = JSON.parse(options.apply);
            uni.getSystemInfo({
                success: (res) => {
                    this.windowWidth = res.windowWidth;
                    this.windowHeight = res.windowHeight;
　　　　　　　　　　　　this.createImg();
                }
            })
        },
        methods: {
            createImg: function(){
                const ctx = uni.createCanvasContext('canvas4renovate');
                ctx.drawImage('/static/images/permiss.jpg', 0, 0, this.windowWidth, this.windowWidth * 1.77);
                ctx.font = 'bold 16rpx serif';
                ctx.setTextAlign('left');
                ctx.setFillStyle('#5A3834');
                ctx.fillText('編號:' + this.renovationInfo.rId, this.windowWidth * 0.13, this.windowWidth * 1.77 * 0.44);
                ctx.fillText('單位:' + this.renovationInfo.company, this.windowWidth * 0.13, this.windowWidth * 1.77 * 0.505);
                ctx.fillText('負責人:' + this.renovationInfo.personMain, this.windowWidth * 0.13, this.windowWidth * 1.77 * 0.57);
                ctx.fillText('聯系電話:' + this.renovationInfo.tel, this.windowWidth * 0.13, this.windowWidth * 1.77 * 0.63);
                ctx.font = 'bold 12rpx serif';
                ctx.fillText('有效期:' + this.renovationInfo.startTimeView + '至' + this.renovationInfo.endTimeView, this.windowWidth * 0.14, this.windowWidth * 1.77 * 0.83);
                ctx.fillText('公司:XXX', this.windowWidth * 0.14, this.windowWidth * 1.77 * 0.86);
                ctx.draw(true, () => {
                    setTimeout(() => {
                        uni.canvasToTempFilePath({
                            canvasId: 'canvas4renovate',
                            fileType: 'jpg',
                            success: (res) => {
                                this.tempFilePath = res.tempFilePath
                                //#ifdef H5
                                this.needLongTapSaveImg = true;
                                //#endif
                            }
                        })
                    })
                })
            },
            downLoadImg: function() {
                if(this.tempFilePath == ''){
                    uni.showToast({
                        title: '圖片未生成',
                        icon: 'none'
                    })
                    return;
                }
                //#ifndef H5
                uni.saveImageToPhotosAlbum({
                    filePath: this.tempFilePath,
                    success: function() {
                        uni.showToast({
                            title: '已保存至相冊',
                            icon: 'none'
                        })
                    }
                });
                //#endif
                //#ifdef H5
                uni.showToast({
                    title: '請長按圖片-保存至相冊'
                })
                //#endif
            }

        }
    }
</script>

<style>
</style>

 

 

【注】

 

一。 1.77 為 背景圖的高寬比

 

二。 canvas畫布 的 style 屬性中的width和height 做數據綁定， 寬帶為當前使用者手機的寬度， 高度為手機寬度 * 1.77， 維持背景圖的寬高比例

 

三。 由於目前H5端不支持saveImageToPhotosAlbum直接保存至圖庫的接口，所以H5端使用長按圖片保存至手機的方法

 

四。  由於canvas畫布不可以長按保存，所以針對H5端在頁面布局上添加一個image標簽， 其src即為canvasToTempFilePath返回的tempFilePath

 

五。  needLongTapSaveImg 用來控制canvas畫布 與 H5端長按圖片 的顯示切換， 只有當平台是H5時，顯示Image標簽，隱藏canvas畫布， 這樣用戶可以長按保存； 除了H5的其他平台則直接調用saveImageToPhotosAlbum

 

 

 

 

 

 

 

 

1