일부 활동 페이지를 만들 때 사진을 업로드해야 하는 경우가 종종 있으며, 사진, 생성된 텍스트 및 스티커도 사용자가 길게 눌러 저장할 수 있는 카드로 생성해야 합니다. 이 요구 사항은 이전에 한 번 완료되었으며 최근에 모두 캔버스를 사용하여 구현되었습니다. 그냥 블로그를 하나 만들어보세요. 더 나은 구현 방법이 있다면 함께 논의해 보세요.
캔버스를 사용하여 이미지 압축HTML에서 쓰기 입력 태그를 사용하고 유형이 파일인 경우 휴대폰의 사진 앨범을 불러와 사진을 선택할 수 있으며, 카메라를 지원하여 사진을 찍을 수도 있습니다. 이 시나리오에서는 이미지 크기가 더 크고 백엔드에서 지원하는 최대 범위를 초과하여 업로드가 실패할 수 있습니다.
<입력ID=파일형식=파일>
1. 먼저 이미지 파일을 받으세요
var eleFile = document.querySelector('#file'); var reader = new FileReader() eleFile.addEventListener('change', function (event) { file = event.target.files[0]; console.log(file) // 선택한 파일은 이미지입니다. if (file.type.indexOf(image) == 0) { reader.readAsDataURL(file) } });2. 이제 이미지 파일을 얻었으므로 js에서 FileReader 개체의 사용을 이해해야 합니다.
FileReader 객체를 사용하면 웹 애플리케이션이 사용자 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)의 내용을 비동기적으로 읽을 수 있습니다.
방법:
| 메소드 이름 | 매개변수 | 설명하다 |
|---|---|---|
| 중단하다 | 없음 | 읽기 중단 |
| readAsBinaryString | 파일 | 바이너리 코드 |
| readAsDataURL | 파일 | DataURL로 파일 읽기 |
| 텍스트로읽기 | 파일, [인코딩] | 파일을 텍스트로 읽기 |
| 이벤트 | 설명하다 |
|---|---|
| 중단하다 | 인터럽트 시 트리거됨 |
| 오류 발생 시 | 중단하다 |
| 온로드 | 파일 읽기가 성공적으로 완료되면 트리거됩니다. |
| 온로드엔드 | 성공 또는 실패에 관계없이 읽기 완료에 의해 트리거됨 |
| onloadstart | 읽기가 시작되면 실행됩니다. |
| 진행 중 | 독서 |
위의 작업을 계속하세요. 사진을 얻은 후에는 파일을 처리하고 변환해야 합니다.
var reader = new FileReader(); //데이터 URL 형식으로 파일을 읽어옵니다. reader.readAsDataURL(file) reader.onload=function(e) { console.log(reader) }이제 이미지가 검색되고 변환되었으므로 압축할 수 있습니다.
var eleFile = document.querySelector('#file'); var reader = new FileReader() eleFile.addEventListener('change', function (event) { file = event.target.files[0]; // console.log( file) // 선택한 파일은 이미지입니다. if (file.type.indexOf(image) == 0) { var reader = new FileReader() // 파일을 Data로 변환합니다. URL 형식의 페이지를 읽습니다. reader.readAsDataURL(file); reader.onload=function(e) { // console.log(this.result) var pre=document.getElementById(pre); this.result ) canvasDataURL(this.result, 100, 0.5) } } }) /* [캔버스로 압축된 canvasDataURL] * @params path 이미지의 base64 형식* @params targetWidth 압축된 이미지의 너비* @params quality 이미지 품질 값이 작을수록 그려진 이미지가 흐려집니다*/ function canvasDataURL(path, targetWidth, quality) { var img = new Image(); img.src = path img.onload = function () { // var that = this // console.log(that) // 기본 비례 압축 var w = this.width var h = this.height scale = w / h; w = targetWidth h = targetWidth / scale var quality = quality; // 기본 이미지 품질은 0.7 // 캔버스 생성 var canvas = document.createElement('canvas'); ctx = canvas.getContext('2d'); // 속성 노드 생성 var anw = document.createAttribute(width) = w; document.createAttribute(height); anh.nodeValue = h; canvas.setAttributeNode(anh); ctx.drawImage(this, 0, 0, w, h); 더 좋습니다. 그려진 이미지가 흐릿할수록 var base64 = canvas.toDataURL('image/jpeg', quality); result=document.getElementById(result); result.setAttribute(src, base64) } }아주 간단해서 압축된 이미지를 얻을 수 있는데, 위의 코드를 보면 캔버스의 toDataURL 메소드가 압축된 이미지의 형식과 압축 품질을 지정하고, 캔버스 정보를 압축하여 변환할 수 있다는 원리를 알 수 있습니다. base64 인코딩으로.
캔버스를 사용하여 카드 만들기장면: 방금 압축한 사진을 다른 사진과 결합하고 길게 누르면 저장됩니다.
function drawCanvas (target) { var canvas = document.querySelector('#myCanvas') var ctx = canvas.getContext('2d') // 기기의 물리적 픽셀과 기기 독립적인 픽셀(dips) 비율 var dp = window.devicePixelRatio || 1 var backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1 var ratio = this.dp / this.backingStoreRatio var oldWidth = canvas.height oldWidth * 비율 canvas.height = oldHeight * 비율 canvas.style.width = oldWidth + 'px' canvas.style.height = oldHeight + 'px' ctx.scale(ratio, ratio) var headerImg = new Image() var bgImg = new Image() headerImg.src = 대상 bgImg.src = '../bg.png' headerImg.onload = (e) => { // 사진의 가로 세로 비율 var rate = headerImg.width / headerImg.height console.log(rate) bgImg.onload = (e) => { ctx.drawImage(headerImg, 10, 30, 50, (50 / rate) )) // 배경 이미지 ctx.drawImage(bgImg, 0, 0, 150, 150) ctx.fillText('Awesome', 80, 70) var resultImg = new Image() resultImg.src = canvas.toDataURL('image/png', 1) resultImg.style.width = '100%' var cardImg=document . getElementById(cardImg);cardImg.setAttribute(src, resultImg.src) } }방금 얻은 이미지를 가져와서 이미지를 로드한 후 캔버스에 그릴 수도 있습니다. 텍스트 등을 추가할 수도 있습니다. 마지막으로 캔버스 정보를 base64 인코딩으로 변환하여 구현합니다. 코드를 통해 예제를 연습할 수 있습니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.