html5 캔버스 위챗 포스터 공유에 대한 자세한 설명(개인등산장)

이 글에서는 캔버스 위챗 포스터 공유에 대해 소개하고, 자세한 내용은 다음과 같습니다.

1. 무작위로 그림 생성
2. WeChat 사용자의 아바타와 이름을 가져옵니다(가져오려면 백엔드 인터페이스를 조정하세요).
3. 사용자의 아바타와 제목을 무작위로 생성된 사진과 결합하여 포스터로 만듭니다.
4. 아마도 이전 페이지의 사용자가 사진에도 채워야 할 소원 텍스트를 입력했을 수도 있습니다.

1. WeChat 브라우저에서 길게 누르면 캔버스가 유효하지 않으며 img처럼 공유할 수 없습니다. (그러면 img로 변환하겠습니다)
2. img로 변환한 후 WeChat 개발자 도구에서는 표시될 수 있지만 실제 장치에서는 작동하지 않습니다(울고 싶지만 눈물이 나지 않습니다) Du Niang은 이미지가 크로스 도메인일 수 있다고 말했습니다 ^-^
3. 사용자 아바타 합성에는 둥근 모서리도 필요하므로 저는 Du Niang을 좋아하지 않습니다.
4. 캔버스의 텍스트가 지정된 너비를 초과하면 래핑해야 합니다. 지정된 너비를 초과하지 않는 다양한 텍스트 정렬 방법만 알고 있습니다. ctx.textAlign = 'center';
5. 고화질 화면에서 캔버스가 흐릿해지는 문제(매우 간단합니다. Du Niang이 왜 그렇게 장황한지 모르겠습니다)는 canvas.witdt=innerWidth*devicePixelRatio가 아닙니다.

 <div class=imgBox v-cloak> <img :src='imgSrc' v-if=imgSrc /></div>

CSS

 <스타일> *{ 여백:0; } 본문, html { 너비: 100%; 높이: 100% } img { 너비: 100%; 표시: 블록 }</style>

스크립트

 // js 기본 구조 new Vue({ el:'imgBox', data:{ urlParam: {},//url에서 값 객체 가져오기 randomNum: 1,//임의의 숫자는 어떤 축복 페이지를 결정하는 데 사용됩니다 userName: '' ,//사용자 이름 imgSrc: '',//합성된 최종 사진 userImg: '',//사용자 아바타 사진 userMessage: '',//사용자 메시지}, 메소드: { // 친구에게 공유 wxShareFriends: function () {}, // 초기화 요청 헤더 wxHttp: function () { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name=csrf-token ]' ).attr('content') } }), // 난수 가져오기 [1,10]randomNumbers() { this.randomNum = Math.ceil(Math.random() * 10) }, // WeChat 사용자의 아바타와 직함, 사용자의 축복문을 가져옵니다. getUserInfo() { var vm = this; , 함수(데이터) { if (data.code == 1) { vm.userImg = data.data.headimg = data.data.nickname; (vm.randomNum % 2 == 0) { vm.userMessage= '인간의 세계에서 우리는 늙었습니다. 인간의 세계에서 서로 만나는 것은 미묘하고 신성한 일입니다.' else { vm.userMessage = '세상에서 만나요, 우리는 늙었어요' } } vm.$nextTick(function () { vm.drawCanvasBgImg(); }) }) }, // 페이지 dpr 및 너비 가져오기 getWindowInfo() { var windowInfo = {}; windowInfo.dpr = window.devicePixelRatio; if (window.innerWidth) { windowInfo.width = window.innerWidth } else; width = document.body.clientWidth; } return windowInfo }, // 액티비티 페이지에서 공유할 큰 배경 이미지를 그립니다. drawCanvasBgImg () {}, // 배경 이미지의 캔버스에 원을 오려 사용자 아바타로 채웁니다. drawCanvasUserImg(canvas, ctx, dpr) {}, // 채우기 사용자 이름 또는 사용자 메시지에서 canvasFillText (canvas, ctx, dpr, CircleR) {}, // base64비트 공유 이미지 합성 ConvertCanvasToImage (canvas) { this.imgSrc = canvas.toDataURL(image/jpeg);//png는 유독하며 QR 코드는 Android에서 인식될 수 없으며 리디렉션될 수 없습니다. this.$Spin.hide() } }})

1. drawCanvasBgImg()
2. drawCanvasUserImg(캔버스, ctx, dpr)
3. canvasFillText(캔버스, ctx, dpr, CircleR)
4. 변환CanvasToImage(캔버스)

 //데이터를 얻은 후 배경 이미지 그리기를 시작합니다. 아이디어는 매우 간단합니다. 이미지를 캔버스에 그린 다음 캔버스에 아바타 텍스트를 그리고 이를 img drawCanvasBgImg () { var vm = this; = document.createElement( canvas); var ctx = canvas.getContext(2d); var clientWidth = this.getWindowInfo().width;//캔버스 너비 적응형 모바일 화면의 화면 너비 가져오기 var dpr = this.getWindowInfo().dpr; ctx.globalCompositeOperation = source-atop;//** 앨리어싱은 쓸모가 없는 것 같습니다. 잘못된 위치에 사용되는지는 모르겠습니다** canvas.width = dpr * clientWidth; //휴대폰 화면으로 인해 레티나 화면을 사용하면 여러 번 렌더링됩니다. 이미지가 흐릿해지는 것을 방지하려면 dpr을 사용하여 캔버스 너비와 높이를 동적으로 설정하세요. 375;//WeChat 헤더에서 상태 표시줄을 제거하면 603이 되어야 합니다. 603이 여전히 화면을 이미지로 채울 수 없다는 것이 이해가 되지 않아 609에 추가했습니다. var img = new Image(); crossOrigin = '';//데드 피트 이미지가 도메인을 교차합니다(img.crossOrigin = 익명은 여전히 ​​base64 형식 이미지를 표시할 수 없습니다) img.src = http://xxx + this.randomNum + .jpg; img.onload = function () { ctx.drawImage(img, 0, 0, canvas.width, canvas.height) vm.drawCanvasUserImg(canvas, ctx, dpr);

 //배경 이미지의 캔버스에 원을 잘라서 사용자 아바타로 채웁니다. drawCanvasUserImg: function (canvas, ctx, dpr) { var vm = this; //Radius var CircleX = canvas. width / 2 ;//원 중심의 X 좌표 var CircleY = 50 * dpr;//원 중심의 Y 좌표 var imgX = CircleX - CircleR;//그림 X의 시작 좌표 var imgY = CircleY - CircleR;//그림 Y의 시작 좌표 var imgWidth = 2 * CircleR;//그림의 크기는 원에 따라 결정됩니다. var img = new Image() img.crossOrigin = ''; = this.userImg; img .onload = function () { ctx.save(); // ctx의 현재 상태를 저장합니다. ctx.arc(circleX, CircleY, CircleR, 0, 2 * Math.PI); //원 그리기 ctx.clip(); //위의 원 자르기 ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth) //방금 자른 원에 그리기 ctx.restore () ; //상태 복원 vm.canvasFillText(canvas, ctx, dpr, CircleR);

 // 사용자 이름 또는 사용자 메시지를 입력합니다. canvasFillText (canvas, ctx, dpr, CircleR) { varfontSizeThis = dpr * 20 + 'px' + ' Arial' var userNameY = 0; userMessageX = dpr * 40; //사용자 메시지의 X축 좌표 var userMessageY = 0; //사용자 메시지의 Y축 좌표 var lastSubStrIndex = 0;//String subscript var lineWidth = 0;//한 줄 너비 var allTextWidth = 0;//모든 문자 너비 ctx.font =fontSizeThis; // (this.userName)인 경우 사용자 이름을 작성하려면 사용자 이름이 필요합니다. { userNameY = CircleR * 2.5; ctx.fillStyle = #0094ff; ctx.textAlign = 'center'(this.userName, canvas.width / 2, userNameY); } if (this.userMessage) { userMessageY = userNameY + dpr * 35 = #000; // (var i = 0; i < this.userMessage) .길이; i++) { allTextWidth += ctx.measureText(this.userMessage[i]).width } // 문자열 길이가 캔버스 영역보다 긴 경우 if (allTextWidth > canvas.width - 2* userMessageX) { for (var i = 0; i < this.userMessage.length; i++) { lineWidth += ctx. MeasureText(this.userMessage[ i]).width; if (lineWidth > canvas.width - 2*userMessageX) { ctx.textAlign = 'left'; ctx.fillText(this.userMessage.substring(lastSubStrIndex, i), userMessageX, userMessageY); userMessageY += dpr * 25;//줄 높이 설정 lineWidth = 0; lastSubStrIndex = i; 길이 - 1) { ctx.fillText(this.userMessage.substring(lastSubStrIndex, i + 1), 사용자 메시지 },

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.