canvas 绘制分享图片加保存图片在系统相册

忘是亡心i 2023-02-26 02:14 171阅读 0赞

// 效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaXNfYXJl_size_16_color_FFFFFF_t_70][]

代码

// 利用canvas  最终 生成图片  
        <canvas class="poster-wrapper" canvas-id="shareCanvas"></canvas>  
        <view class="footer-info">  
            <view class="share-content-main flex">  
                <view class="share-content-item" @click="wechatFriend('WXSceneSession')">  
                    <view class="iconfont iconweixin"></view>  
                    <view>邀请微信好友</view>  
                </view>  
                <view class="share-content-item" @click="saveImg">  
                    <view class="iconfont iconbaocuntu"></view>  
                    <view>保存到相册</view>  
                </view>  
            </view>  
        </view>  
    </view>  
</template>

// 绘制白色背景  
                    ctx.setFillStyle('\#fff');  
                    ctx.fillRect(0, 0, respro.windowWidth - 60, 425);

// 绘制头像  
                    ctx.drawImage(that.photo, (respro.windowWidth - 140) / 2, 40, 80, 80);  
                    ctx.setFontSize(18);

// 绘制昵称

//ctx.measureText(that.teamName).width) / 2  实现文字居中  在app端无效

//结果改为![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaXNfYXJl_size_16_color_FFFFFF_t_70 1][]  
                    ctx.fillText(that.teamName, (respro.windowWidth - 60 - ctx.measureText(that.teamName).width) / 2, 146);  
                    ctx.setFontSize(16);  
                    ctx.setFillStyle('\#666');  
                    ctx.fillText(that.inviteCode, (respro.windowWidth - 60 - ctx.measureText(that.inviteCode).width) / 2, 190);  
                    ctx.drawImage(that.qrImg, (respro.windowWidth - 190) / 2, 217, 130, 130);  
                    ctx.setFontSize(16);  
                    ctx.setFillStyle('\#222');  
                    ctx.fillText('扫描二维码加入团队', (respro.windowWidth - 60 - ctx.measureText('扫描二维码加入团队').width) / 2, 380);  
                    ctx.draw();  
                    // ctx.stroke();  
                    // ctx.draw(false, () => \{  
                    //     uni.hideLoading();  
                    // \});  
                \}  
            \});  
        \},

// 保存图片将 canvas 绘制出 图片路径  
        saveImg() \{  
            // \#ifdef  APP-PLUS  
            uni.showLoading(\{  
                title: '正在保存...',  
                mask: true  
            \});  
            let that = this;  
            uni.canvasToTempFilePath(\{  
                canvasId: 'shareCanvas',  
                success: res => \{  
                    that.savePic(res.tempFilePath);  
                \},  
                fail: function() \{  
                    uni.hideLoading();  
                    //TODO  
                \}  
            \});  
            // \#endif  
        \},  
        //保存  
        savePic(filePath) \{  
            uni.saveImageToPhotosAlbum(\{  
                filePath: filePath,  
                success: function() \{  
                    uni.showToast(\{  
                        title: '已保存系统相册',  
                        duration: 2000  
                    \});  
                \},  
                fail: function(e) \{  
                    uni.showToast(\{  
                        title: '失败',  
                        duration: 2000  
                    \});  
                    //TODO  
                \},  
                complete: function() \{  
                    // uni.hideLoading();  
                \}  
            \});  
        \}  
    \}  
\};  
</script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaXNfYXJl_size_16_color_FFFFFF_t_70]: /images/20230209/f833aca74e8b46bbb9bf62a3d464fc64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaXNfYXJl_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200713193032645.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaXNfYXJl,size_16,color_FFFFFF,t_70