요즘에는 WeChat 공개 계정 운영 활동이 많아 사진을 생성해야 할 필요성이 있습니다. 사진이 생성된 후 친구에게 전송하고 Moments에서 배포할 수 있어 제품 홍보에 도움이 됩니다!
1. 캔버스를 이용해서 이미지를 생성할 수 있는데, 이미 html2canvas라는 오픈소스 라이브러리가 있기 때문에 시간을 절약하기 위해 직접 작성하지는 않았습니다.
github 주소:html2canvas
장황한 말은 그만하고 먼저 살펴보자! ! !
라이브데모
/** * window.devicePixelRatio를 기반으로 픽셀 비율을 가져옵니다.*/ function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio } return 1; 값은 정수입니다*/ functionparseValue(value) { returnparseInt(value, 10) }; 캔버스 그리기 */ async function drawCanvas (selector) { // 변환하려는 DOM 노드를 가져옵니다. const dom = document.querySelector(selector); const box = window.getCompulatedStyle(dom); DOM 노드 const width =parseValue(box.width); const height =parseValue(box.height); // 픽셀 비율 가져오기 const scaleBy = DPR(); 사용자 정의 캔버스 요소 만들기 var canvas = document.createElement('canvas'); // 캔버스 요소 속성 너비와 높이를 DOM 노드 너비와 높이 * 픽셀 비율로 설정합니다. canvas.width = width * scaleBy = height * scaleBy; // 캔버스 CSS 너비와 높이를 DOM 노드 너비와 높이로 설정 canvas.style.width = `${width}px` canvas.style.height = `${height}px`; // 브러시 가져오기 const context = canvas.getContext('2d'); // 모든 그리기 내용을 픽셀 비율로 확대합니다. context.scale(scaleBy, scaleBy); = 높이; 반환 대기 html2canvas(dom, {canvas}).then(function () { ConvertCanvasToImage(canvas, x,y) }) } /** * 이미지를 base64 형식으로 변환*/ function ConvertCanvasToImage(canvas, x, y) { let image = new Image(); let _container = document.getElementsByClassName('container')[0]; let _body = document.getElementsByTagName('body' ) [0]; 이미지.폭 = x; 이미지.높이 = y; canvas.toDataURL(image/png); _body.removeChild(_container); document.body.appendChild(image) } drawCanvas('.container')2. 요즘 휴대폰은 모두 고화질 화면을 갖고 있는데, 아무런 처리를 하지 않으면 블러가 나타나는 이유는 무엇인가요? 여기에는 장치 픽셀 비율이 포함됩니다. devicePixelRatio js는 장치 픽셀 비율을 얻기 위해 window.devicePixelRatio를 제공합니다.
function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio } return 1;이 DPR 함수는 장치의 픽셀 비율을 구하는 것입니다. 그러면 픽셀 비율을 구한 후 무엇을 해야 할까요?
var canvas = document.createElement('canvas'); // 캔버스 요소 속성 너비와 높이를 DOM 노드 너비와 높이 * 픽셀 비율로 설정합니다. canvas.width = width * scaleBy = height * scaleBy; canvas CSS 너비와 높이는 DOM 노드 너비와 높이입니다. canvas.style.width = `${width}px` canvas.style.height = `${height}px`; 브러시 가져오기 const context = canvas.getContext('2d'); // 모든 그리기 내용을 픽셀 비율로 확대 context.scale(scaleBy, scaleBy);3. 장치 픽셀 비율을 구한 후, canvass.width 및 canvas.height에 장치 픽셀 비율(이번에는 scaleBy)을 곱하고, canvas.style.width 및 canvas.style.height를 장치의 너비와 높이로 설정합니다. 돔. 생각해 보세요, 왜 이런 글을 쓰는 걸까요? 마지막으로 그릴 때 그려진 내용이 픽셀 비율만큼 확대됩니다.
예를 들어 iPhone 6S 장치의 너비와 높이는 375입니다. 그래서 1대1로 그리면 고화질 화면에서는 흐릿하게 나오거든요. 6S DPR=2 사진만 보고 이야기를 해보세요.
6더하기 DPR=3
4. 마지막으로 canvas.toDataURL(image/png)을 호출하고 image.src에 값을 할당합니다. WeChat에서는 사진을 저장할 수 없으므로 사진 파일을 생성하고 WeChat 자체 길게 누르기 기능을 호출하여 사진을 앨범에 저장할 수 있습니다. 그림과 같이:
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.