В этой статье представлен пример того, как html2canvas сохраняет изображения высокой четкости в разделах и делится ими со всеми. Подробности следующие:
http://www.bootcdn.cn/ (вы можете искать по html2canvans)
1. Выберите версию html2canvas (эту версию можно увеличить, чтобы изображения были четкими)
Изображение холста, созданное по умолчанию, очень размыто на устройствах Retina. Обработка его в изображение 2x может решить эту проблему:
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 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; Canvas.height = h * 2; холст.стиль.ширина = ш + пикселей; холст.стиль.высота = ч + вар контекст =; Canvas.getContext(2d);//Затем масштабируем холст и удваиваем изображение, чтобы нарисовать его на холсте context.scale(2,2); html2canvas(document.getElementById('skinReport'), {allowTaint: false, taintTest: true , холст: холст, onrendered: функция (холст) { Canvas.id = mycanvas; Canvas.style.display = 'none'; document.body.appendChild(canvas); //Сгенерируем данные изображения в формате Base64 imgData = Canvas.toDataURL(type); //var newImg = document.createElement(img); //newImg.src = dataUrl; //document.body. AppendChild(newImg); //console.log(imgData); вар _fixType = функция (тип) {тип = 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} имя файла имя файла */ var saveFile = function(data, filename){ var save_link = document.createElementNS('http://www.w3.org/1999/xhtml ' , 'a'); save_link.href = данные; save_link.download = имя файла; var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); save_link.dispatchEvent(event }); Имя проблемы var filename = aname+'Skin Test Report' + (new Date()).getTime() + '.' + type; // скачать saveFile(imgData,filename); }, ширина: 1512, высота: 15000 }) },2500) } else { return } })Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.