PS:下面是介绍废话,直接看插件介绍请点击这里

canvas相信大家都不陌生,无论画图,做游戏,做特效都可以用的到它。但是无论在小程序还是H5中,要想渲染图片,都需要等图片加载完成才可以渲染到canvas上。图片一旦多起来,网速再好的情况也要1-2s的加载时间(当然这里指的是网络图片,如果本地图片的话加载还是很快的。)

最近做的小程序都是好多张图片渲染到一起,而素材图片最多的一次高达14900张!当然每次用到的只有其中的15张左右。但是这么多的图片,即使压缩后也高达70m,放在本地是不可能了,特别是对程序大小有限制的小程序。

而canvas插件则可以再后台完成图片加载合成,渲染、保存成图片的操作,前端只需要显示渲染后的图即可。而且还可以跟后面介绍的一个插件配合(看下一篇文章就知道了٩(๑❛ᴗ❛๑)۶)。


一 、插件地址

npm地址:https://www.npmjs.com/package/canvas

二 、使用介绍

注意: 这里只介绍图片的引入与合成部分,其余使用方法请看官方文档。

1. 安装

// 安装canvas
npm install canvas

2. 引入

// 引入canvas
const { createCanvas,  loadImage} = require('canvas')

3. 项目中使用

// 创建canvas
const canvas = createCanvas(800, 800);
const ctx = canvas.getContext('2d');

// Promise方式
loadImage('img_path').then(image => {
    ctx.drawImage(image , 0, 0);
})

// 使用 async/await
const image = await loadImage('img_path');
ctx.drawImage(image , 0, 0);

4. 将canvas保存为图片

// 转为buffer
const buffer = canvas.toBuffer('image/png', {
    compressionLevel: 3,
    filters: canvas.PNG_FILTER_NONE
})
// 用fs将buffer数据保存到本地
fs.writeFile('img_name', buffer, () => {
    // do something
})

这个canvas插件的语法跟H5中几乎是完全相同的,H5中能做的功能这里也可以做,对于需要大量图片及文字渲染可以比用H5前端渲染节省不少时间。

更多功能大家可以去查阅官当文档:https://www.npmjs.com/package/canvas#installation

谢谢阅读,有问题可以联系我:l@lingmx.com

最后修改:2021 年 03 月 31 日
如果觉得我的文章对你有用,请随意赞赏