一秒出图！uni-app页面轻松保存为图片，so easy~

2022-11-25 15:55:09

将小程序页面变为图片：精美的海报和名片设计

简介

作为小程序开发者，你是否遇到过这样的难题：需要将页面内容保存为图片，以便分享到社交媒体或制作精美的海报、名片？传统截图无法满足图片质量或特定需求，而uni-app现在提供了一个强大的解决方案！

集成 uni-app-wxml-to-canvas 组件

通过集成开源项目 uni-app-wxml-to-canvas，你可以轻松地将小程序页面内容转化为精美的图片。只需执行以下步骤：

安装组件：

npm install uni-app-wxml-to-canvas --save

注册组件：
在 main.js 文件中，注册 wxmlToCanvas 组件：

import wxmlToCanvas from 'uni-app-wxml-to-canvas';

Vue.component('wxml-to-canvas', wxmlToCanvas);

使用组件：
在需要生成图片的页面中，使用 wxmlToCanvas 组件：

<wxml-to-canvas ref="wxmlToCanvas" :canvas-id="canvasId" :option="option" @success="handleSuccess" @fail="handleFail"></wxml-to-canvas>

生成图片并下载

调用 wxmlToCanvas 组件的 generate 方法，即可生成图片：

this.$refs.wxmlToCanvas.generate({
  success: (res) => {
    // 图片生成成功回调

    // 保存到手机相册
    wx.saveImageToPhotosAlbum({
      filePath: res.tempFilePath,
      ...
    });
  },
  fail: (err) => {
    // 图片生成失败回调
  }
});

示例代码

// 页面示例：

<template>
  <view class="container">
    ...

    <!-- wxmlToCanvas 组件 -->
    <wxml-to-canvas ref="wxmlToCanvas" :canvas-id="canvasId" @success="handleCanvasSuccess"></wxml-to-canvas>

    ...
  </view>
</template>

<script>
  export default {
    data() {
      return {
        canvasId: 'canvas-id',
      };
    },
    methods: {
      handleCanvasSuccess(res) {
        // 图片生成成功后的处理逻辑
        // ...
      },
    },
  };
</script>