经过li-canvas轻松实现单图、多图、圆角图绘制，单行文字、多行文字、竖向文字绘制，自动换行，保存图片，下载图片等

时间 2019-12-05

标签经过 canvas 轻松实现圆角绘制单行文字自动换行保存图片下载繁體版

原文原文链接

Html5新增的canvas是个强大的功能，估计你们平时都会用到，只是频率不高，偶尔用它合成图片，可是若是不进行封装的话，代码会很乱，因此对canvas经常使用的画图、绘制文字、保存功能进行了封装，目前还比较满意，可以快速完成canvas绘图任务，从容应对需求变动，只需进行简单配置便可。javascript

li-canvas.js

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

github地址：github.com/501351981/l…html

主要功能

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

npm安装

# npm 安装
npm install --save li-canvas
复制代码

直接引用

在html中直接引入js文件.java

<script src="dist/li-canvas.js"></script>
复制代码

如何使用

实例化

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

...
	<script src="../dist/li-canvas.js"></script>
	...
<body>
<canvas id="test" width="1563" height="1180"></canvas>
<script> var canvas=new LiCanvas('test') </script>
</body>
	...
复制代码

图片绘制

绘制单张图片

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

src：图片的url地址npm

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

y：图片在canvas画布上的左上角y坐标数组

width：图片绘制宽度浏览器

height：图片绘制高度

borderRadius：图片圆角半径

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

为何这么作呢？由于图片绘制的时候须要先下载图片，这是个异步操做，因此先添加到任务列表，调用draw()的时候再按照任务添加顺序依次执行

...
	<script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>
<img src="./bg.jpg" id="img" width="0" height="0">
<script> var bg={ src:document.getElementById('img').src,//或者图片的url地址 x:0,//左上角的x坐标 y:0,//左上角的y坐标 width:1563,//图片绘制宽度 height:1180,//图片绘制高度 borderRadius:0 //图片圆角半径 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) //添加绘图任务，并无当即进行绘图 canvas.draw(()=>{ console.log("绘制完成") }) </script>
</body>
	...
复制代码

绘制多图

能够连续屡次调用addDrawImageTask(image)，也能够传图一个数组

...
	<script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>

<script> var img1={ src:"http://*****.com/***.png", x:0, y:0, width:1563, height:1180, borderRadius:0 } var img2={ src:"http://*****.com/***.png", x:0, y:0, width:1563, height:1180, borderRadius:0 } var imgs=[ { src:"http://*****.com/***.png", x:0, y:0, width:100, height:100, borderRadius:0 }, { src:"http://*****.com/***.png", x:0, y:0, width:100, height:100, borderRadius:0 } ] var canvas=new LiCanvas('test') canvas.addDrawImageTask(img1) canvas.addDrawImageTask(img2) //屡次调用实现多图绘制 canvas.addDrawImageTask(imgs) //直接传入一个数组也能够实现多图绘制 canvas.draw(()=>{ console.log("绘制完成") }) </script>
</body>
	...
复制代码

绘制圆角或圆形图片

只须要设置borderRadius便可

...
	<script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>

<script> var img1={ src:"http://*****.com/***.png", x:0, y:0, width:100, height:100, borderRadius:50 //设置圆角半径，当圆角半径为正方形边长一半时，就是一个圆形了 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(img1) canvas.draw(()=>{ console.log("绘制完成") }) </script>
</body>
	...
复制代码

绘制文字

绘制一段文字

调用addDrawTextTask(text,style)

text:要绘制的文字

style：文字样式，包括

x：文字绘制起始位置左上角坐标x

   y：文字绘制其实位置左上角坐标y

   width：文字一行的宽度，超出会自动进行换行

   fontSize：文字大小，整数，单位为px

   fontWeight：文字粗细bold、bolder等或者400，500，600...同css的font-weight

   fontFamily：文字字体，同css

   lineHeight：行高，整数，单位px

   color：颜色

   marginBottom：若是有多段文字，还能够指定段落之间的距离
复制代码

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

...
	<script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>

<script> var canvas=new LiCanvas('test') canvas.addDrawTextTask("要绘制的文字",{ x:110, y:496, width:1340, fontSize:54, fontWeight:'bolder', fontFamily:"PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif", lineHeight:70, color:'#1a1a1a', marginBottom:40 }) canvas.draw(()=>{ console.log("绘制完成") }) </script>
</body>
	...
复制代码

绘制多段文字

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

方法2：text能够传入一个数组，能够共用style

...
	<script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>

<script> var canvas=new LiCanvas('test') canvas.addDrawTextTask(["要绘制的文字段落1","要绘制的文字段落2"],{ x:110, y:496, width:1340, fontSize:54, fontWeight:'bolder', fontFamily:"PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif", lineHeight:70, color:'#1a1a1a', marginBottom:40 }) canvas.draw(()=>{ console.log("绘制完成") }) </script>
</body>
	...
复制代码

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

...
	<script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>

<script> var canvas=new LiCanvas('test',{ fontStyle:{ fontSize:20, fontFamily:"PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif", lineHeight:70, color:'#1a1a1a', marginBottom:40 } }) canvas.addDrawTextTask("要绘制的文字段落1",{ x:110, y:496, width:1340, }) canvas.addDrawTextTask("要绘制的文字段落2",{ x:110, y:696, width:1340, }) canvas.draw(()=>{ console.log("绘制完成") }) </script>
</body>
	...
复制代码

若是多段文字中，有一段的文字须要设置不一样的样式，也能够单独指定样式，以下，是否是很灵活~

...
	<script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>

<script> var canvas=new LiCanvas('test',{ fontStyle:{ fontSize:20, fontFamily:"PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif", lineHeight:70, color:'#1a1a1a', marginBottom:40 } }) canvas.addDrawTextTask([{ text:"要绘制的段落文字1", fontSize：60 },"要绘制的文字段落2","要绘制的文字段落3"],{ x:110, y:496, width:1340, }) canvas.draw(()=>{ console.log("绘制完成") }) </script>
</body>
	...
复制代码

保存下载图片

下载图片

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

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

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

注意：下载图片必须在draw()的回调函数中调用才能够生效

...
	<script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>

<script> var bg={ src:"http://***.jpg", x:0, y:0, width:1563, height:1180, borderRadius:0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) canvas.draw(()=>{ canvas.saveToPng("li-canvas") }) </script>
</body>
	...
复制代码

获取图片数据

有时候，咱们并不想下载图片，好比在微信浏览器中，咱们实际上是但愿用户长按图片保存，此时，咱们但愿canvas合成的图片数据，插入到img的src中

调用：getImageData()能够获取合成的图片数据

...
	<script src="../dist/li-canvas.js"></script>
    ...
<body>
<canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas>
<img src="./bg.jpg" id="img" >
<script> var bg={ src:"http://***.jpg", x:0, y:0, width:1563, height:1180, borderRadius:0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) canvas.draw(()=>{ var src=canvas.getImageData() document.getElementById('img').src=src }) </script>
</body>
	...
复制代码

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