تقدم هذه المقالة مثالاً لكيفية حفظ html2canvas لصور عالية الدقة في divs ومشاركتها مع الجميع، والتفاصيل هي كما يلي:
http://www.bootcdn.cn/ (يمكنك البحث في html2canvans)
1. حدد إصدار html2canvas (يمكن تكبير هذا الإصدار لضمان وضوح الصور)
تكون صورة اللوحة القماشية التي تم إنشاؤها بشكل افتراضي ضبابية للغاية على أجهزة شبكية العين، ويمكن أن تؤدي معالجتها إلى صورة 2x إلى حل هذه المشكلة:
var w = $(#code).width();var h = $(#code).height();// اضبط عرض اللوحة القماشية وارتفاعها على ضعف عرض الحاوية وارتفاعها 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.style.width = w + px; Canvas.getContext(2d);// ثم قم بقياس اللوحة القماشية ومضاعفة الصورة للرسم على اللوحة القماشية context.scale(2,2); ، قماش: قماش، تم عرضه: function(canvas) { Canvas.id = mycanvas; document.body.appendChild(canvas); // إنشاء بيانات الصورة الأساسية 64 imgData = Canvas.toDataURL(type); //var newImg = document.createElement(img); //newImg.src = dataUrl; 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]; / معالجة بيانات الصورة واستبدال نوع mime imgData = imgData.replace(_fixType(type),'image/octet-stream'); /** * احفظ الملف محليًا* @param {String} بيانات صورة البيانات المراد حفظها محليًا * @param {String} اسم الملف filename */ var saveFile = function(data, filename){ var save_link = document.createElementNS('http://www.w3.org/1999/xhtml ' , 'a'); save_link.href = data; save_link.download = filename var events = document.createEvent('MouseEvents'); Event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, 0, null); save_link.dispatchEvent(event }; اسم المشكلة var filename = aname+'Skin Test Report' + (new Date()).getTime() + '.' // download saveFile(imgData,filename); }، العرض: 1512، الارتفاع: 15000 }) },2500) } else { return } })ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.