라라라, 먼저 요구 사항에 대해 이야기해 보겠습니다. 이 제품은 사용자가 앱 내의 WeChat, QQ 및 기타 플랫폼에 사진을 공유하기를 원합니다. 이미지에는 사용자의 이름, 아바타, 사용자 정보가 포함된 QR 코드가 포함되어 있습니다. 그럼 이 포스터를 어떻게 생성하나요~~
우선, 우리 상사는 html2canvas라는 플러그인이 있다고 말했습니다. 그 기능은 DOM 노드를 그림으로 변환하는 것입니다. 테스트해봤는데 작동이 되네요~ 이 플러그인은 좀 크네요. 포스터의 요구사항을 충족시키기 위해 이렇게 큰 것을 소개하는 것은 아쉬운 것 같습니다! ! ! 그럼 제가 직접 그려보는 게 좋을 것 같아요~
첫째, 렌더링
댕댕당당~~최종 생성된 포스터에는 아바타와 이름, QR코드가 포함되어 있습니다. 물론 사진 속 QR코드는 바이두의 QR코드입니다~ 드디어 주요 플랫폼 공유를 위한 base64가 생성됩니다.
더 이상 고민하지 않고 코드는 다음과 같습니다. (게으르기 때문에 이 코드를 컴파일하지 않았습니다...)
<canvas id=myCanvas width=750 height=1200 style=border:1px solid #d3d3d3;배경:#ffffff;></canvas>
DOM 노드는 매우 간단합니다. 캔버스 태그를 생성하고 원하는 대로 속성을 작성하면 됩니다~
var canvas = document.getElementById(myCanvas); //캔버스 노드 함수 가져오기 imageToCanvas(canvas,url1,url2,code) { //캔버스 노드 배경 이미지 url1 아바타 url2 QR 코드 코드 전달 var ctx = canvas.getContext(2d) ; var img1 = new Image(); img1.src = url1; //이전 내용은 설명하지 않고 이미지를 생성합니다. function(){ ctx.drawImage(img1,0,0); //이미지가 로드되면 0 0부터 캔버스에 할당됩니다. var img2 = new Image(); img2.src = url2; img2.onload = function(){ ctx.save(); //현재 캔버스 상태 저장 ctx.arc(374, 134, 44, 0, 2 * Math . PI); // 자르기 작업은 사각형 아바타를 원으로 자릅니다. //캔버스에서 원을 잘라냅니다. ctx.clip(); //Crop ctx.drawImage(img2, 330, 90, 88, 88); //img2를 크기 88의 330 90 좌표에 넣습니다. ctx.restore(); //캔버스 상태를 해제합니다. ctx.font=28px Arial; textAlign=center; ctx.fillStyle ='#FFFFFF'; //이전 단계는 text 속성을 center로 설정하는 것입니다. ctx.fillText(이름은 Shenma, 375,220); //여기의 텍스트는 실제로 하드 코딩되어 있습니다. 더 많은 매개변수를 전달해도 괜찮습니다. var img3 = new Image() ; img3.src = code; img3.onload = function() { ctx.drawImage(img3,136,554,478,478) //이미지 추가 var imgCode = ConvertCanvasToImage(canvas); //이미지를 base64로 변환 console.log(imgCode.getAttribute('src')) } } }}imageToCanvas(canvas,1.png,'3.jpeg','code.png') ; //초기화 함수 ConvertCanvasToImage(canvas) { var image = new Image() image.src = canvas.toDataURL(image/png); //캔버스를 img 반환 이미지로 변환합니다.}이런 식으로 base64를 얻은 다음 사용할 수 있습니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.