经过li-canvas轻松实现单图、多图、圆角图绘制，单行文字、多行文字、竖向文字绘制，自动换行，保存图片，下载图片等
Html5新增的canvas是个强大的功能， 估计你们平时都会用到，只是频率不高，偶尔用它合成图片，可是若是不进行封装的话，代码会很乱，因此对canvas经常使用的画图、绘制文字、保存功能进行了封装，目前还比较满意，可以快速完成canvas绘图任务，从容应对需求变动，只需进行简单配置便可。css
li-canvas.js
对Html5的canvas功能进行了封装，方便进行单图、多图绘制、圆角图片绘制、多行文字绘制、自动换行、图片保存下载等功能.
github地址：https://github.com/501351981/...html
主要功能
- 图片绘制：单图/多图绘制、圆角图片绘制.
- 文字绘制：多段文字绘制、自动换行.
- 图片保存：获取图片数据、下载图片到本地，支持自定义下载图片名.
npm安装
# npm 安装 npm install --save li-canvas
直接引用
在html中直接引入js文件.git
<script src="dist/li-canvas.js"></script>
如何使用
实例化
使用li-canvas时须要先实例化对象，new LiCanvas(canvas_id,options),传入canvas的id，options选填，能够设置canvas背景和默认文字样式等github
...
<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是一个对象，包括npm
src：图片的url地址canvas
x：图片在canvas画布上的左上角x坐标数组
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地址：https://github.com/501351981/...
相关文章
- 1. 通过li-canvas轻松实现单图、多图、圆角图绘制，单行文字、多行文字等
- 2. 经过li-canvas轻松实现单图、多图、圆角图绘制，单行文字、多行文字、竖向文字绘制，自动换行，保存图片，下载图片等
- 3. canvas绘图文字换行问题，canvas绘图文字自动换行
- 4. 【微信小程序】canvas绘制海报插件（圆形头像，圆角图片，渐变圆角矩形，单行文本，多行文本，绘制base64图片）
- 5. 自定义view绘图篇--图片和文字的绘制
- 6. windows GDI+ 离屏绘制文字图片
- 7. Golang 图片上绘制文字
- 8. 利用PorterDuffXfermode绘制图片文字
- 9. QT 中QPainter绘制文字、图片
- 10. canvas中文字和图片的绘制
- 更多相关文章...
- • R 绘图 - 饼图 - R 语言教程
- • R 绘图 - 中文支持 - R 语言教程
- • 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解
- • SpringBoot中properties文件不能自动提示解决方法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 通过li-canvas轻松实现单图、多图、圆角图绘制，单行文字、多行文字等
- 2. 经过li-canvas轻松实现单图、多图、圆角图绘制，单行文字、多行文字、竖向文字绘制，自动换行，保存图片，下载图片等
- 3. canvas绘图文字换行问题，canvas绘图文字自动换行
- 4. 【微信小程序】canvas绘制海报插件（圆形头像，圆角图片，渐变圆角矩形，单行文本，多行文本，绘制base64图片）
- 5. 自定义view绘图篇--图片和文字的绘制
- 6. windows GDI+ 离屏绘制文字图片
- 7. Golang 图片上绘制文字
- 8. 利用PorterDuffXfermode绘制图片文字
- 9. QT 中QPainter绘制文字、图片
- 10. canvas中文字和图片的绘制