uniapp使用wxml2canvas

### 如何在 UniApp 中使用 wxml2canvas 插件实现 Canvas 功能 #### 安装依赖包 为了能够在项目中使用 `wxml2canvas` 插件，在开始之前需要安装必要的 npm 包。可以通过命令行工具执行如下命令来完成安装： ```bash npm install @minui/wxml2canvas --save ``` 此操作会下载并保存所需的库文件到项目的 node_modules 文件夹下。 #### 配置插件 确保已正确配置小程序的合法域名列表，特别是当涉及到从外部加载资源时。网络图片的域名必须加入到小程序后台设置中的 "downloadFile 合法域名" 列表里[^2]；否则可能会遇到无法正常显示图像的问题，并且会影响后续元素渲染。 #### 编写页面结构 (WXML) 创建一个新的 WXML 页面模板用于展示 canvas 组件的内容。下面是一个简单的例子说明如何定义画布区域： ```html <template> <view class="container"> <!-- 设置 id 属性以便 JavaScript 可以访问 --> <canvas type="2d" id="myCanvas"></canvas> <!-- 提交按钮触发绘图逻辑 --> <button bindtap="drawImage">Draw Image</button> </view> </template> <style scoped> /* 添加一些样式使布局更美观 */ .container { display: flex; justify-content: center; align-items: center; } </style> ``` #### 实现业务逻辑 (JS/TS) 接下来编写对应的脚本代码处理用户的交互行为以及调用 `wxml2canvas` 进行图形绘制工作： ```javascript import { createCanvas } from '@minui/wxml2canvas'; export default { data() { return {}; }, methods: { drawImage(e) { const ctx = uni.createCanvasContext('myCanvas', this); // 初始化 wxml2canvas 对象实例 let canvasObj = new createCanvas({ width: 300, height: 200, context: ctx, // 将上下文传入给插件 }); // 加载远程图片前先确认其所在域已被允许作为 downloadFile 的合法源地址 wx.downloadFile({ url: 'https://example.com/image.png', success(res) { if (res.statusCode === 200) { // 成功获取图片后继续下一步骤... // 创建 image 对象并将路径赋值给 src 属性 var img = document.createElement("img"); img.src = res.tempFilePath; // 图片加载完成后才可安全地将其添加至 canvas 上面 img.onload = function () { canvasObj.drawImage(img, 0, 0); // 执行实际绘画动作 ctx.draw(); }; } }, fail(err) { console.error('Failed to load image:', err); } }); } } }; ``` 上述代码片段展示了怎样通过点击事件处理器函数 `drawImage()` 来初始化画布环境、准备要绘制的对象（这里指代一张来自互联网上的 PNG 格式的图片），最后利用 `ctx.draw()` 方法把所有准备工作转化为可视化的输出结果呈现在界面上。