Html2canvas: عرض القماش غير واضح على شاشات شبكية العين

هذه المكتبة رائعة ، لكنك تعاني من ذلك أيضًا. أعتقد أن هذه هي نفس المشكلة مثل # 379 و # 373 و # 340 و # 203 و # 312 و # 158 والمذكورة في # 390.

أي تحديثات على هذا؟

https://github.com/niklasvh/html2canvas/pull/127 أصلح التشويش

لم تحل

: +1:

+1 الرجاء الإصلاح

لا تعمل أنماط Css على نطاق 1+ بشكل صحيح؟ يمكن حلها عن طريق تكبير html أخذ لقطة شاشة ويجب أن تبدو أكثر وضوحًا

+1 الرجاء الإصلاح

+1 إصلاح

تضمين التغريدة
إخوانه ، جرب هذه التكوينات ، لا تحل 100٪ بل تزيد من الجودة

html2canvas (document.getElementById ('flag')، {
useCORS: صحيح ،
allowTaint: صحيح ،
letterRendering: صحيح ،
onrendered: الوظيفة (قماش) {
var ctx = canvas.getContext ('2d') ؛
ctx.webkitImageSmoothingEnabled = خطأ ،
ctx.mozImageSmoothingEnabled = خطأ ،
ctx.imageSmoothingEnabled = خطأ ،
} ،
}) ؛

تضمين التغريدة
Bro ， 3Q لمساعدتك ، لكن يبدو أنه أقل وضوحًا ، مشاكل في أجهزة الشبكية

من فضلك أصلحه!

+1 الرجاء الإصلاح

الرجاء إصلاحه ، Orz

+1

على ما يبدو ، يمكنك استخدام لوحة قماشية موجودة للعرض (والتي يمكنك تكوينها مسبقًا ليتم عرضها في شبكية العين).

مثال:

var w = 1000;
var h = 1000;
var div = document.querySelector('#divtoconvert');
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(div, { canvas: canvas }).then(function(canvas) {
    // do what you want
});

MisterLamb الحل الخاص بك يعمل ببراعة.

أود أيضًا أن يتم إصلاح هذا من فضلك

+1

+1 إصلاح

MisterLamb أنا أحاول الحل الخاص بك ولكن لا يبدو أنه يعمل. لقد صنعت هذا الكمان بإصلاحك الذي لا يبدو أنه يفعل أي شيء - هل تعرف ما أفعله خطأ؟ يمكنك النقر فوق الزر في الكمان والسماح بتنزيل ملفات متعددة لاختبارها ومعرفة أنها متطابقة في هذا التطبيق.

MisterLamb آه تغيرت للتو إلى 0.5.0-alpha1 وتعمل بشكل أفضل ، شكرًا لك. تم تحديث

+1

MisterLamb وآخرون ، جربوا للتو اليوم ، وهذا المقتطف لم يعد يعمل مع 0.5.0 b4 - الحصول على قماش فارغ - ويتم عرضه بشكل صحيح إذا لم يستخدم قماش الرسم الخاص.

تحرير: ربما الخطأ بلدي ، وتغيير الكمان على ما يرام.

تحرير 2: لا يمكن تضييقه ، وإعادة تنفيذه مثل هذا والآن لدي شيء مرئي ولكن مع بعض الإزاحة. ربما يوجد أسلوب في مكان ما لا يدعمه h2c بشكل كامل وهو يفسد النتيجة: (أنا محظوظ.

تحرير 3: نعم ، كان لا بد من نقله لأعلى إلى document.body للتخلص من الإزاحة.

MisterLamb أنت عبقري حقيقي ، شكرًا للمشاركة ... لقد أنقذت يومي

MisterLamb أنت الأفضل 👍

makc لي أيضا! الحصول على قماش فارغ - وعرضه بشكل صحيح إذا لم يتم استخدام قماش الرسم الخاص

لمعلوماتك - حل eKoopmans يعمل بشكل جيد حتى الآن في الاختبار: https://github.com/niklasvh/html2canvas/pull/1087 .. يعمل به حاليًا

الإغلاق لصالح # 1087

MisterLamb ولكن كيف يتم تحسين دقة الصورة ؟؟
عندما أحاول حفظ هذه الصورة المحفوظة بدقة 96 نقطة في البوصة ، أحتاج إلى صورة 300+ نقطة في البوصة. كيف يمكنني القيام بذلك ؟؟؟

@ shivtumca12 في الإصدار الأخير ، v1.0.0-alpha.1 ، يمكنك استخدام الخيار scale لزيادة الدقة ( scale: 2 سيضاعف الدقة من 96 نقطة في البوصة الافتراضية).

// Zoom 90٪ ، قبل استدعاء html2canvas ، ثم أعد التكبير إلى 100٪.

document.body.style.zoom = '99٪ '،
html2canvas (document.querySelector ("# content")، {allowTaint: false، widht: _width، height: _height}). ثم (الوظيفة (canvas) {

    // var pdf = new jsPDF('p','pt','a4');
    // pdf.addImage(canvas.toDataURL("image/png"), 'PNG', 10, 10, 580, 0)                            
    // pdf.save('Grafico.pdf');        
    var link = document.createElement('a');
    link.href = canvas.toDataURL("image/png");
    link.download = 'Dashboard.png';
    document.body.appendChild(link);
    link.click();
    link.style.display = 'none';
    document.body.removeChild(link)        
    document.body.style.zoom = '100%';        
    $('.preloader-wrapper').hide();
});

MisterLamb الحل أعلاه يعمل مع النصوص الموجودة في صفحة html. أثناء عرض النص يقوم بتحويل النص في الصورة ببراعة. لكن محتوى الصورة (صورة) لصفحة html لا يزال معروضًا مع التعتيم. الرجاء نصحي كيف يمكنني تصحيح ذلك.

لا تزال الصور ضبابية بالنسبة لي أيضًا.

window.devicePixelRatio = 2 ؛

لقد وضعت هذا قبل أن أقوم بعمل html2canvas وعملت معي

مرحبًا ، أريد إدخال النص الفارسي utf8 ، لكن الخط فشل
كيفية حل هذه المشكلة

wiht http://jsfiddle.net/o0a8pbwd/1/ أكواد

لماذا لا تعرف هذه الصورة؟