어제 저는 HTML5 Canvas의 도움으로 그려지는 QR 코드 생성용 플러그인인 QRCode.js를 소개했습니다. 그래서 오늘의 주인공은 캔버스, 즉 캔버스의 실제 응용입니다.
1. QR코드 다운로드HTMLCanvasElement는 type 매개변수로 지정된 이미지 표현 형식이 포함된 데이터 URI를 반환하는 toDataURL 메서드를 제공합니다. 이 방법을 통해 QR 코드 이미지를 생성하고 다운로드할 수 있습니다. 예는 다음과 같습니다:
/*html*/<div id=qrcode>div><a href=javascript:; download=QR code id=down>QR 코드 다운로드</a>/*js*/var canvas = document.getElementsByTagName(' canvas' )[0];var downImg = document.getElementById('down')img.href = document.getElementsByTagName('canvas')[0].toDataURL('image/png') 2. 사진에 워터마크 추가캔버스의 fillText 및 drawImage 메소드를 사용하여 이미지에 워터마크를 쉽게 추가할 수 있습니다. 예는 다음과 같습니다:
/*html*/<canvas id=canvas></canvas>/*js*/var img = new Image(); // img 요소 생성 var canvas = document.getElementById('canvas')var ctx = canvas.getContext ('2d');img.src = 'myImage.png';img.onload = function(){ ctx.drawImage(img, 0, 0); ctx.font=30px yahei; //워터마크 텍스트 설정 ctx.fillText(large front end, 1100, 260)}오늘은 여기까지입니다. 캔버스의 다른 응용 프로그램을 자유롭게 공유해 보세요. 모든 사람의 학습에 도움이 되기를 바라며, 또한 모든 사람이 VeVb Wulin Network를 지지해 주기를 바랍니다.