js 将canvas生成图片下载,或直接保存一张图片

将canvas数组保存

function downLoadImage(canvas,name) {
    var a = document.createElement("a");
    a.href = canvas.toDataURL();
    a.download = name;
    a.click();
}

canvas:传入canvas的dom对象
name:保存的图片的名字

直接将图片保存的方法

function downLoadImage(img,name) {
    var a = document.createElement("a");
    a.href = img.src;
    a.download = name;
    a.click();
}

img:图片的dom对象
name:保存为图片时的名字

Wxml2Canvas 是一个将小程序 WXML 转换为 Canvas 绘图指令的库,它可以将 WXML 中的组件和样式转换为 Canvas 中的绘图指令,从而生成一张画布图片。如果你想要批量生成图片,可以尝试以下步骤: 1. 安装 Node.js Wxml2Canvas 是一个 Node.js 库,因此首先需要在本地安装 Node.js 环境。 2. 安装 Wxml2Canvas 在命令行中执行以下命令安装 Wxml2Canvas: ``` npm install -g wxml2canvas ``` 3. 准备 WXML 文件 将需要转换为图片的 WXML 文件放置在一个文件夹中。 4. 创建 JavaScript 脚本 在文件夹中创建一个名为 `generate.js` 的 JavaScript 脚本文件,编写以下代码: ``` const fs = require('fs'); const path = require('path'); const wxml2canvas = require('wxml2canvas'); const sourceDir = './source'; // WXML 文件所在文件夹 const targetDir = './target'; // 生成图片所在文件夹 // 读取 WXML 文件 const files = fs.readdirSync(sourceDir).filter((file) => { return path.extname(file) === '.wxml'; }); // 遍历 WXML 文件并生成图片 files.forEach((file) => { const wxml = fs.readFileSync(path.join(sourceDir, file), 'utf-8'); const options = { width: 300, // 画布宽度 height: 400, // 画布高度 }; wxml2canvas(wxml, options).then((canvas) => { const base64 = canvas.toDataURL().replace(/^data:image\/\w+;base64,/, ''); const buffer = Buffer.from(base64, 'base64'); const targetPath = path.join(targetDir, file.replace('.wxml', '.png')); fs.writeFileSync(targetPath, buffer); }); }); ``` 5. 运行 JavaScript 脚本 在命令行中执行以下命令运行 JavaScript 脚本: ``` node generate.js ``` 运行结束后,生成图片保存在 `target` 文件夹中。 以上是一个简单的批量生成图片的示例,你可以根据自己的需求修改 JavaScript 脚本中的参数和代码逻辑。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值