通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等

Html5新增的canvas是个强大的功能, 估计大家平时都会用到,只是频率不高,偶尔用它合成图片,但是如果不进行封装的话,代码会很乱,所以对canvas常用的画图、绘制文字、保存功能进行了封装,目前还比较满意,能够快速完成canvas绘图任务,从容应对需求变更,只需进行简单配置即可。

li-canvas.js

对Html5的canvas功能进行了封装,方便进行单图、多图绘制、圆角图片绘制、多行文字绘制、自动换行、图片保存下载等功能.

github地址: github.com/501351981/l…

主要功能

  • 图片绘制:单图/多图绘制、圆角图片绘制.
  • 文字绘制:多段文字绘制、自动换行.
  • 图片保存:获取图片数据、下载图片到本地,支持自定义下载图片名.

npm安装

直接引用

在html中直接引入js文件.

如何使用

实例化

使用li-canvas时需要先实例化对象,new LiCanvas(canvas_id,options),传入canvas的id,options选填,可以设置canvas背景和默认文字样式等

图片绘制

  • 绘制单张图片

调用addDrawImageTask(image),其中参数image是一个对象,包括

src:图片的url地址

x:图片在canvas画布上的左上角x坐标

y:图片在canvas画布上的左上角y坐标

width:图片绘制宽度

height:图片绘制高度

borderRadius:图片圆角半径

调用addDrawImageTask(image)时,并没有立即绘制图片,而是添加了一个绘图任务,只有调用draw(callback)时,才执行绘图任务,执行完成调用callback回调函数

为什么这么做呢?因为图片绘制的时候需要先下载图片,这是个异步操作,所以先添加到任务列表,调用draw()的时候再按照任务添加顺序依次执行

  • 绘制多图

可以连续多次调用addDrawImageTask(image),也可以传图一个数组

  • 绘制圆角或圆形图片

只需要设置borderRadius即可

绘制文字

  • 绘制一段文字

调用addDrawTextTask(text,style)

text:要绘制的文字

style:文字样式,包括

文字绘制,同样是异步的,知道调用draw(callback)才真正进行绘制

  • 绘制多段文字

方法1:反复调用addDrawTextTask(text,style),同上

方法2:text可以传入一个数组,可以共用style

其中style也可以在对象实例化的时候传入一个默认值,避免反复设置一些共用的style

如果多段文字中,有一段的文字需要设置不同的样式,也可以单独指定样式,如下, 是不是很灵活~

保存下载图片

  • 下载图片

下载为png图片:saveToPng("文件名")

下载为jpeg图片:saveToJpeg("文件名")

下载为gif图片:saveToGif("文件名")

注意:下载图片必须在draw()的回调函数中调用才可以生效

  • 获取图片数据

有时候,我们并不想下载图片,比如在微信浏览器中,我们其实是希望用户长按图片保存,此时,我们希望canvas合成的图片数据,插入到img的src中

调用:getImageData()可以获取合成的图片数据

github地址: github.com/501351981/l…

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:943129070,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复