새로 추가된 HTML5의 캔버스는 누구나 매일 사용하는 것으로 추정되지만 가끔 사진을 합성하는 데 사용되는 빈도는 높지 않습니다. 지저분해서 자주 사용하는 캔버스 그리기, 텍스트 그리기, 저장 기능이 캡슐화되어 있어서 현재는 상당히 만족스럽습니다. 간단한 구성만 있으면 캔버스 그리기 작업을 빠르게 완료하고 차분하게 대응할 수 있습니다.
li-canvas.jsHTML5의 캔버스 기능은 단일 그림, 다중 그림 그리기, 둥근 모서리 그림 그리기, 여러 줄 텍스트 그리기, 자동 줄 바꿈, 그림 저장 및 다운로드 등과 같은 기능을 용이하게 하기 위해 캡슐화됩니다.
깃허브 주소: github.com/501351981/l…
주요 기능•그림 그리기: 단일 그림/다중 그림 그리기, 둥근 모서리 그림 그리기 •텍스트 그리기: 여러 단락 텍스트 그리기, 자동 줄바꿈 •그림 저장: 그림 데이터 가져오기, 로컬에 그림 다운로드 및 사용자 정의 다운로드 그림 이름 지원 .
npm 설치# npm install npm install --li-canvas 저장직접 견적
js 파일을 html로 직접 가져옵니다.
<script src=dist/li-canvas.js></script>사용방법 인스턴스화
li-canvas를 사용하는 경우 먼저 개체를 인스턴스화하고 new LiCanvas(canvas_id,options), 인스턴스화하고 캔버스 ID를 전달해야 하며 옵션은 선택 사항이며 캔버스 배경 및 기본 텍스트 스타일 등을 설정할 수 있습니다.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180></canvas><script> var canvas= 새로운 LiCanvas('test') </script></body> ... 그림 그리기•한 장의 그림을 그린다
addDrawImageTask(image)를 호출합니다. 여기서 매개변수 image는 다음을 포함한 객체입니다.
src: 이미지의 URL 주소
x: 캔버스에 있는 이미지의 왼쪽 상단 모서리의 x 좌표
y: 캔버스에 있는 그림의 왼쪽 상단 모서리의 y 좌표
너비: 그림 그리기 너비
높이: 그림 도면 높이
borderRadius: 그림 모서리 반경
addDrawImageTask(image)를 호출하면 이미지가 바로 그려지지 않고, draw(callback)이 호출될 때만 그리기 작업이 추가되며, 실행이 완료되면 콜백 함수가 호출됩니다.
왜 이런 일을 하는가? 드로잉 시 이미지를 먼저 다운로드 받아야 하기 때문에 비동기 작업이므로 작업 목록에 먼저 추가되고, draw() 호출 시 작업이 추가된 순서대로 실행됩니다.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px 단색 빨간색></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 좌표 모서리 너비:1563,/ /그림 그리기 너비 높이: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 단색 빨간색></canvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, 너비:1563, 높이:1180, borderRadius:0 } var img2={ src:http://*****.com/***.png, x:0, y:0, 너비: 1563, 높이:1180, borderRadius:0 } var imgs=[ { src:http://*****.com/***.png, x:0, y:0, 너비:100, 높이:100, borderRadius:0 }, { src:http://*****.com/***.png, x:0, y:0, 너비:100, 높이: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 단색 빨간색></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 좌표
너비: 텍스트 한 줄의 너비입니다. 너비를 초과하면 자동으로 줄바꿈됩니다.
FontSize: 텍스트 크기, 정수, 단위는 px
FontWeight: 텍스트 두께 굵게, 굵게 등 또는 400, 500, 600... CSS 글꼴 무게와 동일
FontFamily: 텍스트 글꼴, CSS와 동일
lineHeight: 줄 높이, 정수, 단위 px
색깔: 색깔
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 단색 빨간색></canvas><script> var canvas=new LiCanvas('test') canvas.addDrawTextTask(그려질 텍스트, { x:110, y:496, 너비:1340, 글꼴 크기:54, 글꼴 가중치:'bolder', 글꼴Family:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, 색상:'#1a1a1a', marginBottom:40 }) canvas.draw(()=>{ console.log(그리기 완료) }) </script></body> ...•텍스트의 여러 단락 그리기
방법 1: 위와 동일하게 addDrawTextTask(text, style)를 반복적으로 호출합니다.
방법 2: 텍스트를 배열로 전달하고 스타일을 공유할 수 있습니다.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px 단색 빨간색></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> ...일부 공유 스타일을 반복적으로 설정하지 않도록 객체가 인스턴스화될 때 스타일은 기본값을 전달할 수도 있습니다.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px 단색 빨간색></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, 너비:1340, }) canvas.addDrawTextTask(그려질 텍스트 문단 2,{ x:110, y:696, width:1340, }) canvas.draw(()=>{ console.log(그리기 완료) }) </script></ 몸> ...여러 단락에 서로 다른 스타일을 설정해야 하는 텍스트 단락이 있는 경우 다음과 같이 스타일을 별도로 지정할 수도 있습니다. 매우 유연합니까~
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px 단색 빨간색></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 그려진 단락 텍스트 1, 글꼴 크기: 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 단색 빨간색></canvas><script> var bg={ src:http://***.jpg, x:0, y:0, 너비:1563, 높이:1180, borderRadius:0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) canvas.draw(()=>{ canvas.saveToPng(li-canvas) }) </script ></body> ...•이미지 데이터 가져오기
때로는 이미지를 다운로드하고 싶지 않을 때가 있습니다. 예를 들어 WeChat 브라우저에서는 실제로 사용자가 이미지를 길게 눌러 저장하기를 원합니다. 이때 캔버스에서 합성된 이미지 데이터가 삽입되기를 원합니다. 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 단색 빨간색></canvas><img src=./bg.jpg id=img ><script> var bg={ src:http://***.jpg, x:0, y:0, 너비:1563, 높이:1180, borderRadius:0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) 캔버스. draw(()=>{ var src=canvas.getImageData() document.getElementById('img').src=src }) </script></body> ...깃허브 주소: github.com/501351981/l…
요약이상 편집자가 소개한 내용인데, 단일 그림, 다중 그림, 둥근 모서리 그림 그리기, 한 줄 텍스트, 여러 줄 텍스트 등을 li-canvas를 통해 HTML5에서 쉽게 구현하는 방법이 도움이 되었으면 좋겠습니다. 질문이 있으시면 메시지를 남겨주시면 제 시간에 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!