บทความนี้จะแนะนำตัวอย่างวิธีที่ html2canvas บันทึกรูปภาพความละเอียดสูงในรูปแบบ div และแชร์กับทุกคน โดยมีรายละเอียดดังนี้:
http://www.bootcdn.cn/ (คุณสามารถค้นหา html2canvans)
1. เลือกเวอร์ชัน html2canvas (เวอร์ชันนี้สามารถขยายได้เพื่อให้ได้ภาพที่ชัดเจน)
ภาพแคนวาสที่สร้างโดยค่าเริ่มต้นจะพร่ามัวมากบนอุปกรณ์เรตินา การประมวลผลเป็นภาพ 2 เท่าสามารถแก้ปัญหานี้ได้:
var w = $(#code).width();var h = $(#code).height();//ตั้งค่าความกว้างและความสูงของผืนผ้าใบเป็น 2 เท่าของความกว้างและความสูงของคอนเทนเนอร์ var canvas = document .createElement(canvas );canvas.width = w * 2;canvas.height = h * 2;canvas.style.width = w + px;canvas.style.height = h + px;var บริบท = 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('Do you want to download the skin test report?')) { setTimeout(function(){ var canvas = document.createElement(canvas), w=$('#skinReport').width(), h=$('#skinReport').height(); canvas.width = w * 2; canvas.height = h * 2; ; canvas.style.width = w + px; canvas.style.height = h + px; canvas.getContext(2d);//จากนั้นปรับขนาดผืนผ้าใบและเพิ่มรูปภาพเป็นสองเท่าเพื่อวาดบนผืนผ้าใบ context.scale(2,2); html2canvas(document.getElementById('skinReport'), { AllowTaint: false, taintTest: true , canvas: canvas, onrendered: function(canvas) { canvas.id = mycanvas; canvas.style.display = 'ไม่มี'; document.body.appendChild(canvas); //สร้างข้อมูลรูปภาพ base64 imgData = canvas.toDataURL(type); //var newImg = document.createElement(img); //newImg.src = dataUrl; appendChild (newImg); //console.log (imgData); var _fixType = ฟังก์ชั่น (ประเภท) { ประเภท = type.toLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; กลับ 'รูปภาพ/' + r; / ประมวลผลข้อมูลรูปภาพและแทนที่ประเภท mime imgData = imgData.replace(_fixType(type),'image/octet-stream'); /** * บันทึกไฟล์ในเครื่อง* @param {String} data ข้อมูลรูปภาพที่จะบันทึกในเครื่อง * @param {String} ชื่อไฟล์ชื่อไฟล์ */ var saveFile = function(data, filename){ var save_link = document.createElementNS('http://www.w3.org/1999/xhtml ' , 'a'); save_link.href = data; save_link.download = ชื่อไฟล์; var event = document.createEvent('MouseEvents'); event.initMouseEvent('คลิก', จริง, เท็จ, หน้าต่าง, 0, 0, 0, 0, 0, เท็จ, เท็จ, เท็จ, เท็จ, 0, null); ชื่อปัญหา var filename = aname+'Skin Test Report' + (new Date()).getTime() + '.' + type; // download saveFile(imgData,filename); }, ความกว้าง:1512, ความสูง:15000 }) },2500) } อื่น ๆ { กลับ;ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network