更新记录

1.0（2024-06-06） 下载此版本

HTML转图片

介绍

html转图片，支持H5及APP 支持 文字，图片，表格等 图片支持：本地图片，在线图片，svg格式图片，iconfont图标（纯色，彩色）

使用说明

1. 使用方法

   <htmlToImage :picName="'图片名称'">
   <button>转图片（插槽，自定义内容）</button>
   </htmlToImage>
   // html要转换的图片需配置id=, 默认canvas，可在setting.js配置中修改
   <view class="content" id="canvas" ref="canvas">
   <view class="title">本地图片（png）</view>
   <image class="logo" src="/static/example-1.png"></image>
   <view class="title">本地图片（svg）</view>
   <image class="logo" src="/static/example-2.svg"></image>
   <view class="title">网络图片</view>
   <image class="logo" src="https://iradesign.io/assets/img/ira_gallery.png" />
   <view class="title">阿里icon（单色）</view>
   <i class="iconfont icon-apps" />
   <view class="title">阿里icon（彩色 H5不支持）</view>
   <i class="t-icon t-icon-a-Group788" />
   </view>

2. 配置文件 setting.js

   const setting = {
   canvasName: 'canvas', // 要转换的dom Id
   imgFormatName: 'png', // 转换格式
   iconName: 't-icon' // icon名
   }

平台兼容性

uni-app

其他

HTML转图片

介绍

html转图片，支持H5及APP 支持 文字，图片，表格等 图片支持：本地图片，在线图片，svg格式图片，iconfont图标（纯色，彩色）

使用说明

1. 使用方法

   <htmlToImage :picName="'图片名称'">
   <button>转图片（插槽，自定义内容）</button>
   </htmlToImage>
   // html要转换的图片需配置id=, 默认canvas，可在setting.js配置中修改
   <view class="content" id="canvas" ref="canvas">
   <view class="title">本地图片（png）</view>
   <image class="logo" src="/static/example-1.png"></image>
   <view class="title">本地图片（svg）</view>
   <image class="logo" src="/static/example-2.svg"></image>
   <view class="title">网络图片</view>
   <image class="logo" src="https://iradesign.io/assets/img/ira_gallery.png" />
   <view class="title">阿里icon（单色）</view>
   <i class="iconfont icon-apps" />
   <view class="title">阿里icon（彩色 H5不支持）</view>
   <i class="t-icon t-icon-a-Group788" />
   </view>

2. 配置文件 setting.js

   const setting = {
   canvasName: 'canvas', // 要转换的dom Id
   imgFormatName: 'png', // 转换格式
   iconName: 't-icon' // icon名
   }