小程序-uni-app：将页面（html+css）生成图片/海报/名片，进行下载保存到手机

r囧r小猫 2024-02-22 09:08 14阅读 0赞

#### 一、需要描述 ####

本文实现，uniapp微信小程序，把页面内容保存为图片，并且下载到手机上。  
说实话网上找了很多资料，但是效果不理想，直到看了一个开源项目，我知道可以实现了。  
本文以开源项目uniapp-wxml-to-canvas 为蓝本 记录集成的步骤，以供参考。  
详细内容可以下载并启动 uniapp-wxml-to-canvas项目，详细学习。

[GitHub - ThaneYang/uniapp-wxml-to-canvas][GitHub - ThaneYang_uniapp-wxml-to-canvas]

#### 二、代码实现 ####

#### 2.1、wxcomponents目录 ####

将”开源项目“的这两个目录及包含的文件复制到自己项目的同名目录下。

![80259ab3fac349c989328c682183c830.png][]

#### 2.2、pages.json ####

在pages.json文件，globalStyle 配置 usingComponents

globalStyle: {
        "usingComponents": {
    		"wxml-to-canvas": "/wxcomponents/wxml-to-canvas/index"
    	}
    }

![4619f8ccf61344c281bb5fc94f05c307.png][]

#### 2.3、utils/DomData.js ####

wxml 定义html

style 定义样式

/**
     *
     *
     * @param {*} number  第几位
     * @param {*} src 名片头像
     * @param {*} name 名片名字
     * @param {*} qrCodeUrl 小程序codeURL图片
     */
    /**
    下边的内容可以自己定义，这样就可以定制属于自己的海报了 
    */
    const wxml = (name, pic, c1, c2) =>`
    <view class="container">
    	<image src="`+pic+`"  class="pic"/>
    	<text class="name">`+ name +`</text>
    	<text class="content">`+ c1 +`</text>
    	<text class="content">`+ c2 +`</text>
    	<view class="bottom">
    		<image src="`+pic+`"  class="qr"/>
    		<text class="msg">扫码一起加入学习吧</text>
    	</view>
    </view>
    `
    
    /**
     *
     *
     * @param {*} screenWidth 屏幕宽度
     * @param {*} canvasWidth  画布宽度
     * @param {*} canvasHeight  画布高度
     * @param {*} numberWidth  数字宽度，动态设置
     * @return {*} 
     */
    const style = (screenWidth, canvasWidth, canvasHeight) => {
      return {
        "container": {
          width: canvasWidth,
          height: canvasHeight,
          position: 'relative',
          overflow: 'hidden',
    			backgroundColor: '#ffffff',
        },
        "name":{
          fontSize: 20,
          color: '#333',
          marginLeft: canvasWidth * 0.08,
          width: canvasWidth * 0.84,
          height: screenWidth * 0.18,
    			textAlign: 'center',
        },
        "content": {
    			fontSize: 14,
    			color: '#333',
          width: canvasWidth * 0.84,
          height: screenWidth * 0.15,
    			marginLeft: canvasWidth * 0.08,
        },
        "pic": {
          width: canvasWidth * 0.3,
          height: screenWidth * 0.28,
          marginTop: canvasWidth * 0.1,
          marginLeft: canvasWidth * 0.35,
    			marginBottom: canvasWidth * 0.05,
    			borderRadius: screenWidth * 0.14,
    			overflow: 'hidden',
        },
        "bottom":{
          width: canvasWidth,
          height: screenWidth * 0.2,
          flexDirection: 'row',
          justifyContent: 'self-start',
          alignItems: 'center',
    			backgroundColor: '#fafafa',
          position: 'absolute',
          bottom: 0,
          left: 0,
        },
    		"qr": {
    		  width: canvasWidth * 0.14,
    		  height: screenWidth * 0.14,
    		  marginLeft: canvasWidth * 0.04,
    			marginRight: canvasWidth * 0.04,
    		},
        "msg": {
          fontSize: 14,
          color: '#a1a1a1',
          width: canvasWidth * 0.74,
    			height: 14,
    			textAlign: 'left'
        },
      }
    }
    
    module.exports = {
      wxml,
      style
    }

#### 2.4、业务页面 ####

<template>
      <view class="share-page">
        <view class="share-page-box" id="box" v-if="show" :style="{width: canvasWidth + 'px', height: canvasHeight + 'px' }">
          <wxml-to-canvas class="widget" :width="canvasWidth" :height="canvasHeight"></wxml-to-canvas>
        </view>
        <view class="share-page-box msg-box" v-else :style="{width: canvasWidth + 'px', height: canvasHeight + 'px' }">
          {
       {msg}}
        </view>
        <view class="share-page-btn" @tap="extraImage">
    			<button class="btn-big" :style="getBtnStyle">保存图片</button>
        </view>
    		
      </view>
    </template>
    <script>
    const { wxml, style } = require('@/utils/DomData.js')
    export default {
      name: '',
      data () {
        return {
          show: false, // 是否显示canvas
          canvasWidth: 320, // 默认canvas宽高
          canvasHeight: 480,
          screenWidth: null, // 设备宽度
    			name: '',
    			pic: '',
    			chapter1: '',
    			chapter2: '',
    			widget: null,
          msg: '加载中，请稍等...', // 提示语
        }
      },
      onLoad (options) {
        console.log('options', options);
        this.name = 'Willam Yang'
        this.pic = 'https://pic1.zhimg.com/80/v2-58fe538a59f870407b1435bfd45893ed_720w.jpeg'
        this.chapter1 = '第一段'
        this.chapter2 = '第二段'
        
        // 获取设备信息
        wx.getSystemInfo({
          success: (res) =>{
            this.screenWidth = res.screenWidth
    
            this.canvasWidth = this.screenWidth * 0.9
            this.canvasHeight = this.screenWidth * 1.1
            console.log('screenWidth', this.screenWidth)
    
            this.show = true
            // 数字容器宽度 动态设置 
            setTimeout(() => {
              wx.showLoading({title: '海报生成中...'})
              this.widget = this.selectComponent('.widget')
              this.renderToCanvas()
            }, 1000)
          }
        });
      },
      methods: {
        // wxml 转 canvas
        renderToCanvas () {
          console.log('this.widget', this.widget)
          const _wxml = wxml(this.name, this.pic, this.chapter1, this.chapter2)
          const _style = style(this.screenWidth, this.canvasWidth, this.canvasHeight)
          const p1 = this.widget.renderToCanvas({ wxml: _wxml, style: _style })
          p1.then((res) => {
            console.log('海报生成成功');
            wx.hideLoading()
            // this.container = res
          }).catch((err) => {
            console.log('生成失败')
          })
        },
       // 保存到朋友圈
      extraImage() {
        if (!this.show) {
          wx.showToast({title: '海报生成失败，无法分享到朋友圈', icon: 'none'})
          return
        }
        const p2 = this.widget.canvasToTempFilePath()
        let that = this
        p2.then(result => {
          let path = result.tempFilePath
          wx.getSetting({
            success: res => {
              // 非初始化且未授权的情况，需要再次弹窗提示授权
              if (res.authSetting['scope.writePhotosAlbum'] != undefined && res.authSetting['scope.writePhotosAlbum'] != true) {
                wx.showModal({
                  title: '是否授权相册权限',
                  content: '需要获取相册权限，请确认授权，否则无法使用相关功能',
                  success: res => {
                    if (res.confirm) {
                      wx.openSetting({
                        success: dataAu => {
                          if (dataAu.authSetting["scope.writePhotosAlbum"] == true) {
                            wx.showToast({
                              title: '授权成功',
                              icon: 'none',
                              duration: 1000
                            });
                            that.saveIMg(path);
                          } else {
                            wx.showToast({
                              title: '授权失败',
                              icon: 'success',
                              duration: 1000
                            });
                          }
                        }
                      });
                    }
                  }
                });
              } else {
                // 初始化且未授权，系统默认会弹窗提示授权
                // 非初始化且已授权，也会进入这里
                that.saveIMg(path);
              }
            }
          });
        })
      },
       // 保存到相册
      async saveIMg (tempFilePath) {
        wx.saveImageToPhotosAlbum({
          filePath: tempFilePath,
          success: async (res) => {
            wx.showModal({
              content: '图片已保存，分享给好友吧！',
              showCancel: false,
              confirmText: '好的',
              confirmColor: '#333',
              success: function (res) {
                wx.navigateBack({
                  //返回
                  delta: 1
                });
              },
              fail: function (res) {
                console.log('res', res);  
              }
            });
          },
      
          fail: function (res) {
            wx.showToast({
              title: '您取消了授权',
              icon: 'none',
              duration: 2000
            })
          }
        });
       }
      }
    }
    </script>
    <style lang="scss" scoped>
    .share-page {
      background: #fff;
      position: relative;
      overflow: hidden;
      min-height: 100vh;
      .msg-box {
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
      }
      .share-page-box {
        margin: 40rpx auto;
        position: relative;
        overflow: hidden;
    		box-shadow: 0rpx 6rpx 20rpx 6rpx rgba(0, 0, 0, 0.2);
      }
      .share-page-btn {
        margin: 0 40rpx 50rpx;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    </style>

到此功能实现，集成步骤也比较简单，

#### 三、过程记录 ####

#### 3.1、小程序 wxcomponents 目录干啥的 ####

小程序的 wxcomponents 目录一般用来放置自定义组件或第三方组件。这些组件可以在小程序中多次使用，提高代码的复用性和开发效率。在这个目录下的组件包括两种类型：

1. 小程序官方提供的基础组件库，比如 button、 swiper 等；  
2. 开发者自定义的组件，比如自定义图标、模板、模态框等。

这些组件可以通过 require 方法引入并使用，也可以在页面的 json 配置文件中进行全局注册，被所有页面调用。通过创建自定义组件，可以让开发者更加方便地完成复杂的交互效果和组件封装，从而提高小程序的可维护性和开发效率。

#### 3.2、微信小程序selectComponent返回null的问题排查与分析 ####

[微信小程序selectComponent返回null的问题排查与分析-CSDN博客][selectComponent_null_-CSDN]

#### 四、欢迎交流指正 ####

#### 五、参考连接 ####

[微信小程序插件--wxml-to-canvas(生成图片)\_微信小程序生成海报插件-CSDN博客][--wxml-to-canvas_-CSDN]

[【微信小程序】解决canvas组件层级最高问题\_微信小程序canvas层级\_大大。的博客-CSDN博客][canvas_canvas_-CSDN]

[用小程序·云开发打造功能全面的博客小程序丨实战 - 知乎][-]

[wxa-plugin-canvas-语言吧][wxa-plugin-canvas-]

[浅谈html2canvas实现浏览器截图的原理\_invalid element provided as first argument-CSDN博客][html2canvas_invalid element provided as first argument-CSDN]

[GitHub - ThaneYang/uniapp-wxml-to-canvas][GitHub - ThaneYang_uniapp-wxml-to-canvas]

[uniapp 微信小程序 实现 将base64图片保存相册和转发分享微信好友功能记录 直接cv就能用！！！！\_uniapp分享图片到微信\_柑橘乌云\_的博客-CSDN博客][uniapp _ _ _base64_ _cv_uniapp_-CSDN]

[uni-app小程序生成海报wxml-to-canvas\_西瓜霜的技术博客\_51CTO博客][uni-app_wxml-to-canvas_51CTO]

[uniapp 、微信小程序使用canvas生成海报 - 知乎][uniapp _canvas_ -]

[uni.canvasToTempFilePath(object, component) | uni-app官网][uni.canvasToTempFilePath_object_ component_ _ uni-app]

[uni-app 微信小程序如何把图片保存到本地相册？ · 杂记 · 看云][uni-app _ _ _ _]

[html2canvas简单使用 - 简书][html2canvas_ -]

[Painter: 小程序生成海报组件，非常好用，json配置，一下生成][Painter_ _json]

[微信小程序实现生成分享海报案例\_微信小程序生成海报-CSDN博客][-CSDN]

[uniapp中使用html2canvas做H5端的海报生成功能 - 简书][uniapp_html2canvas_H5_ -]

[uni-app 中使用 html2canvas 生成图片（支持多端）\_uniapp html2canvas\_不想搬砖。的博客-CSDN博客][uni-app _ html2canvas _uniapp html2canvas_-CSDN]

[uni-app APP、html引入html2canvas截图以及截长图\_html2canvas npm-CSDN博客][uni-app APP_html_html2canvas_html2canvas npm-CSDN]

[uni-app 中使用 html2canvas 生成图片（支持多端）\_uniapp html2canvas\_不想搬砖。的博客-CSDN博客][uni-app _ html2canvas _uniapp html2canvas_-CSDN]

[小程序页面生成图片保存分享——笔记 - 简书][- 1]

[GitHub - ThaneYang_uniapp-wxml-to-canvas]: https://github.com/ThaneYang/uniapp-wxml-to-canvas
[80259ab3fac349c989328c682183c830.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/ad28d75bd4db4155b049ae0f6719b6b7.png
[4619f8ccf61344c281bb5fc94f05c307.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/9ae7d00903d3463c9aa52ee1b860217e.png
[selectComponent_null_-CSDN]: https://blog.csdn.net/qq_36611526/article/details/103719036
[--wxml-to-canvas_-CSDN]: https://blog.csdn.net/animatecat/article/details/125981963
[canvas_canvas_-CSDN]: https://blog.csdn.net/weixin_43923808/article/details/126470285
[-]: https://zhuanlan.zhihu.com/p/79779267?from_voters_page=true
[wxa-plugin-canvas-]: http://www.yuyanba.com/default.aspx/did175175
[html2canvas_invalid element provided as first argument-CSDN]: https://blog.csdn.net/qq398577351/article/details/121975071
[uniapp _ _ _base64_ _cv_uniapp_-CSDN]: https://blog.csdn.net/m0_57033755/article/details/131602054
[uni-app_wxml-to-canvas_51CTO]: https://blog.51cto.com/u_15668841/6090217
[uniapp _canvas_ -]: https://zhuanlan.zhihu.com/p/597629702
[uni.canvasToTempFilePath_object_ component_ _ uni-app]: https://uniapp.dcloud.net.cn/api/canvas/canvasToTempFilePath.html#canvastotempfilepath
[uni-app _ _ _ _]: http://static.kancloud.cn/sfzl/uniapp/3065884
[html2canvas_ -]: https://www.jianshu.com/p/cc0f1079d33c
[Painter_ _json]: https://gitee.com/jackhunx/Painter
[-CSDN]: https://blog.csdn.net/m0_46613429/article/details/131008511
[uniapp_html2canvas_H5_ -]: https://www.jianshu.com/p/790f7d891d51
[uni-app _ html2canvas _uniapp html2canvas_-CSDN]: https://blog.csdn.net/weixin_42779803/article/details/118384426
[uni-app APP_html_html2canvas_html2canvas npm-CSDN]: https://blog.csdn.net/weixin_37391237/article/details/131124063
[- 1]: https://www.jianshu.com/p/aa4196a96e4e?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes