經過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…

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。