이 기사에서는 html2canvas가 고화질 사진을 div에 저장하고 모든 사람과 공유하는 방법에 대한 예를 소개합니다.
http://www.bootcdn.cn/ (html2canvans 검색 가능)
1. html2canvas 버전을 선택하세요. (이 버전은 선명한 이미지를 보장하기 위해 확대될 수 있습니다.)
기본적으로 생성된 캔버스 이미지는 Retina 장치에서 매우 흐릿합니다. 2x 이미지로 처리하면 이 문제를 해결할 수 있습니다.
var w = $(#code).width();var h = $(#code).height();//캔버스의 너비와 높이를 컨테이너 너비와 높이의 2배로 설정 var canvas = document .createElement(캔버스);canvas.width = w * 2;canvas.height = h * 2;canvas.style.width = w + px;canvas.style.height = h + px;var context = canvas.getContext(2d);//그런 다음 캔버스 크기를 조정하고 이미지를 두 배로 늘려 캔버스에 그립니다. context.scale(2,2);html2canvas(document.querySelector(#code), { canvas: canvas, onrendered: function ( 캔버스) { ... }});다운로드 방법:
.on('click','.download',function(){ $('#mycanvas').remove(); var _height=$('.skinReport').height(); //맨 위로 스크롤$ ( 'html, body').animate({scrollTop:0}); if(confirm('피부 테스트 보고서를 다운로드하시겠습니까?')) { setTimeout(function(){ var canvas = document.createElement(canvas), w=$('#skinReport').width(), h=$('#skinReport').height(); canvas.width = w * 2; ; 캔버스.스타일.폭 = w + px; 캔버스.스타일.높이 = h + px; canvas.getContext(2d);//그런 다음 캔버스 크기를 조정하고 이미지를 두 배로 늘려 캔버스에 그립니다. context.scale(2,2); html2canvas(document.getElementById('skinReport'), {allowTaint: false, taintTest: true , 캔버스: 캔버스, onrendered: function(canvas) { canvas.id = mycanvas; canvas.style.display = 'none'; document.body.appendChild(canvas); //base64 이미지 데이터 생성 imgData = canvas.toDataURL(type); //var newImg = document.createElement(img); //newImg.src = //document.body. AppendChild(newImg); //console.log(imgData) var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0] return 'image/' + r; / 이미지 데이터 처리 및 MIME 유형 교체 imgData = imgData.replace(_fixType(type),'image/octet-stream') /** * 파일을 로컬에 저장* @param {String} data 로컬에 저장할 이미지 데이터 * @param {String} filename 파일 이름 */ var saveFile = function(data, filename){ var save_link = document.createElementNS('http://www.w3.org/1999/xhtml ' , 'a'); save_link.href = 데이터; save_link.download = 파일 이름 = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null) // 다운로드 후 문제 이름 var filename = aname+'Skin Test Report' + (new Date()).getTime() + '.' + type; }, 너비:1512, 높이:15000 }) },2500) } else { return } })위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.