Artikel ini memperkenalkan contoh bagaimana html2canvas menyimpan gambar definisi tinggi dalam div dan membagikannya kepada semua orang. Detailnya adalah sebagai berikut:
http://www.bootcdn.cn/ (Anda dapat mencari html2canvans)
1. Pilih versi html2canvas (versi ini dapat diperbesar untuk memastikan gambar jelas)
Gambar kanvas yang dihasilkan secara default sangat buram pada perangkat retina. Memprosesnya menjadi gambar 2x dapat mengatasi masalah ini:
var w = $(#code).width();var h = $(#code).height();//Atur lebar dan tinggi kanvas menjadi 2 kali lebar dan tinggi wadah var canvas = document .createElement(kanvas );kanvas.lebar = w * 2;kanvas.tinggi = h * 2;kanvas.gaya.lebar = w + px;kanvas.gaya.tinggi = h + px;var konteks = canvas.getContext(2d);//Kemudian skala kanvas dan gandakan gambar untuk menggambar di kanvas konteks.scale(2,2);html2canvas(document.querySelector(#code), { canvas: canvas, onrendered: function ( kanvas) { ... }});Metode pengunduhan:
.on('click','.download',function(){ $('#mycanvas').remove(); var _height=$('.skinReport').height(); //Gulir ke atas$ ( 'html, body').animate({scrollTop:0}); if(confirm('Apakah Anda ingin mengunduh laporan pengujian kulit?')) { setTimeout(function(){ var canvas = document.createElement(kanvas), w=$('#skinReport').width(), h=$('#skinReport').height(); kanvas.lebar = w * 2; ; kanvas.gaya.lebar = w + px; kanvas.gaya.tinggi = h + px var konteks = canvas.getContext(2d);//Kemudian skalakan kanvas dan gandakan gambar untuk menggambar di kanvas konteks.scale(2,2); html2canvas(document.getElementById('skinReport'), {allowTaint: false, taintTest: true , kanvas: kanvas, dirender: function(kanvas) { canvas.id = mycanvas; canvas.style.display = 'none'; document.body.appendChild(kanvas); //Buat data gambar base64 imgData = canvas.toDataURL(type); //var newImg = document.createElement(img); appendChild(newImg); //console.log(imgData); var _fixType = fungsi(tipe) { tipe = type.toLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; / Memproses data gambar dan mengganti tipe mime imgData = imgData.replace(_fixType(type),'image/octet-stream'); /** * Simpan file secara lokal* @param {String} data Data gambar yang akan disimpan secara lokal * @param {String} nama file nama file */ var saveFile = function(data, nama file){ var save_link = document.createElementNS('http://www.w3.org/1999/xhtml ' , 'a'); save_link.href = data; save_link.download = nama file; var event = document.createEvent('MouseEvents'); event.initMouseEvent('klik', benar, salah, jendela, 0, 0, 0, 0, 0, salah, salah, salah, salah, 0, null); Nama masalah var filename = aname+'Skin Test Report' + (new Date()).getTime() + '.' + type; }, lebar:1512, tinggi:15000 }) },2500) } else { kembali; } })Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.