經過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. Window下Ribbit MQ安裝
- 2. Linux下Redis安裝及集羣搭建
- 3. shiny搭建網站填坑戰略
- 4. Mysql8.0.22安裝與配置詳細教程
- 5. Hadoop安裝及配置
- 6. Python爬蟲初學筆記
- 7. 部署LVS-Keepalived高可用集羣
- 8. keepalived+mysql高可用集羣
- 9. jenkins 公鑰配置
- 10. HA實用詳解
歡迎關注本站公眾號,獲取更多信息
相關文章
- 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中文字和圖片的繪製