The newly added canvas of Html5 is a powerful function. It is estimated that everyone uses it every day, but the frequency is not high. Occasionally, it is used to synthesize pictures. However, if it is not encapsulated, the code will be very messy, so the commonly used canvas drawing, text drawing, The save function has been encapsulated, and I am currently quite satisfied with it. It can quickly complete canvas drawing tasks and calmly respond to changes in requirements. It only requires simple configuration.
li-canvas.jsThe canvas function of Html5 is encapsulated to facilitate functions such as single picture, multi-picture drawing, rounded corner picture drawing, multi-line text drawing, automatic line wrapping, picture saving and downloading, etc.
Github address: github.com/501351981/l…
Main functions•Picture drawing: single picture/multiple picture drawing, rounded corner picture drawing. •Text drawing: multi-paragraph text drawing, automatic line wrapping. •Picture saving: obtaining picture data, downloading pictures to the local, and supporting custom downloaded picture names.
npm install# npm install npm install --save li-canvasdirect quote
Import js files directly into html.
<script src=dist/li-canvas.js></script>How to use Instantiate
When using li-canvas, you need to instantiate the object first, new LiCanvas(canvas_id,options), pass in the id of the canvas, options are optional, you can set the canvas background and default text style, etc.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180></canvas><script> var canvas= new LiCanvas('test') </script></body> ... Picture drawing•Draw a single picture
Call addDrawImageTask(image), where the parameter image is an object, including
src: URL address of the image
x: The x coordinate of the upper left corner of the image on the canvas
y: The y coordinate of the upper left corner of the picture on the canvas
width: picture drawing width
height: picture drawing height
borderRadius: picture corner radius
When addDrawImageTask(image) is called, the image is not drawn immediately, but a drawing task is added. The drawing task is only executed when draw(callback) is called, and the callback function is called when the execution is completed.
Why do this? Because the image needs to be downloaded first when drawing, this is an asynchronous operation, so it is added to the task list first, and when draw() is called, it is executed in the order in which the tasks are added.
... <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,//or the url address of the picture x:0,//x coordinate of the upper left corner y:0,//y coordinate of the upper left corner width:1563,/ /Picture drawing width height:1180,//Picture drawing height borderRadius:0 //Picture corner radius} var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) //Add a drawing task, and the drawing is not performed immediately canvas.draw(()=>{ console.log(drawing completed) }) </script></body> ...•Draw multiple graphs
You can call addDrawImageTask(image) multiple times in a row, or you can pass an array of images.
... <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) //Multiple calls to achieve multi-image drawing canvas.addDrawImageTask(imgs) //Multi-image drawing can also be achieved by directly passing in an array canvas.draw(()=>{ console.log(drawing completed) }) </script> </body> ...•Draw rounded or circular pictures
Just set 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 //Set the fillet radius. When the fillet radius is half the side length of the square, it is a circle} var canvas=new LiCanvas('test') canvas .addDrawImageTask(img1) canvas.draw(()=>{ console.log(drawing completed) }) </script></body> ... Draw text•Draw a text
Call addDrawTextTask(text,style)
text: text to be drawn
style: text style, including x: coordinate x of the upper left corner of the starting position of text drawing
y: The coordinate y of the upper left corner of the actual position of text drawing
Width: The width of one line of text. If it exceeds the width, it will automatically wrap.
fontSize: text size, integer, unit is px
fontWeight: text thickness bold, bolder, etc. or 400, 500, 600... same as css font-weight
fontFamily: text font, same as css
lineHeight: line height, integer, unit px
color: color
marginBottom: If there are multiple paragraphs of text, you can also specify the distance between paragraphs
Text drawing is also asynchronous. It is not actually drawn until draw(callback) is called.
... <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(text to be drawn, { 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(drawing completed) }) </script></body> ...•Draw multiple paragraphs of text
Method 1: Repeatedly call addDrawTextTask(text, style), same as above
Method 2: text can be passed in an array and style can be shared
... <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([Text paragraph to be drawn 1, Text paragraph to be drawn 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(drawing completed) }) </script></body> ...The style can also pass in a default value when the object is instantiated to avoid repeatedly setting some shared styles.
... <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 paragraph to be drawn 1,{ x:110, y:496, width:1340, }) canvas.addDrawTextTask(Text paragraph to be drawn 2,{ x:110, y:696, width:1340, }) canvas.draw(()=>{ console.log(drawing completed) }) </script></ body> ...If there is a paragraph of text in multiple paragraphs that needs to be set in different styles, you can also specify the style separately, as follows, is it very flexible~
... <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:To Drawn paragraph text 1, fontSize: 60 }, text paragraph 2 to be drawn, text paragraph 3 to be drawn],{ x:110, y:496, width:1340, }) canvas.draw(()=>{ console.log(drawing completed) }) </script></body> ...Save download image
•Download pictures
Download as png image: saveToPng(file name)
Download as jpeg image: saveToJpeg(file name)
Download as gif image: saveToGif (file name)
Note: Downloading images must be called in the callback function of draw() to take effect.
... <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> ...•Get image data
Sometimes, we don’t want to download the image. For example, in the WeChat browser, we actually want the user to long press the image to save it. At this time, we want the image data synthesized by canvas to be inserted into the src of img.
Call: getImageData() to obtain the synthesized image data
... <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 address: github.com/501351981/l…
SummarizeThe above is what the editor introduces to you, how to easily realize single picture, multi-picture, rounded corner picture drawing, single line text, multi-line text, etc. in HTML5 through li-canvas. I hope it will be helpful to you. If you have any questions, please Leave me a message and I will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!