Html2canvas: طريقة لزيادة دقة الصورة التي تم إنشاؤها عبر toDataURL

أعلم أنه كان هناك حديث عن هذا في مرحلة ما في قضايا / طلبات أخرى وقد قدم شخص ما طلب سحب ، لكنني لم أر طلبات السحب مدمجة.

لدي طريقة عمل نستخدمها للتحقق من كثافة بكسل الجهاز. ولكن هذا يمكن أن يكون له تأثير سلبي على الأداء. بدلاً من ذلك ، ربما نرغب في الحصول على بارامتر لنخبرها بالعرض بدقة أعلى؟

missing نعم ،

أيضًا إذا كنت لا تمانع في مشاركة طريقة العمل لكثافة بكسل الجهاز ، فسيكون ذلك رائعًا. تطبيقي الأساسي هو مجرد تصدير ملف png لسحابة كلمات بحد أقصى 50 مصطلحًا. لذلك أنا لست مهتمًا جدًا بالأداء الذي حدث في هذا.

هل هي مشكلتك في جودة الصورة أم أنها تأثير ضبابي (في بعض الحالات يتم إنشاء بعض الصور بواسطة html2canvas بتأثير ضبابي)؟

brcontainer أعتقد أن جودة الصورة هي المشكلة. أظن. على سبيل المثال ، عند التكبير بنسبة 100٪ ، تبدو الصورة جيدة بشكل لائق. ولكن بمجرد أن أقوم بالتكبير حتى 5٪ ، يمكنك أن ترى انخفاضًا ملحوظًا في جودة الصورة. يرجى الاطلاع على الصورة المرفقة.

يمكنني فقط التأكد من رؤية شيء ما كمثال للمشكلة في وقت التشغيل.

جرب نفس المكان باستخدام http://jsfiddle.net/ ، وانشر الرابط هنا.

[تعديل]
إذا كنت تحاول تطبيق _zoom_ في لوحة قماشية تم إنشاؤها بواسطة html2canvas ، يمكنك محاولة استخدام (قبل الحفظ كصورة):

ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

حظا سعيدا

أهلا،

نحن بحاجة إلى دقة أعلى من 96 ديسيبل متوحد الخواص. نحن بحاجة إلى المزيد مثل 300 نقطة في البوصة.

هل يمكن فعل هذا مع html2canvas؟

لدينا نفس المشكلة مع التشويش على الصورة. نحتاج إلى أي حل يزيل التشويش لدينا ويعطينا DPI يبدو جيدًا.

أي أفكار / اقتراحات حول كيفية القيام بذلك ، أو أي طرق بديلة لتحقيق نفس التأثير؟

شكرا

brcontainer أنا مجرد تعديل الآن. لقد فعلت ما اقترحته ولم يحالفني الحظ مع جودة الصورة. هذا ما فعلته -

                var ctx = canvas.getContext('2d');

                ctx.webkitImageSmoothingEnabled = false;
                ctx.mozImageSmoothingEnabled = false;
                ctx.imageSmoothingEnabled = false;

                var rawData = canvas.toDataURL("image/png");

بالترتيب الخاطئ ، يجب عليك تطبيق "ImageSmoothingEnabled" قبل تغيير حجم الصورة.

ضع عينة من الكود الخاص بك في http://jsfiddle.net وسأحاول تحريره

اهلا ياجماعة،

أرغب في تحميل صور عالية الدقة بدون قيود 96dpi من toDataURL. نظرًا لعدم توفر toDataURLHD بعد ، كيف يمكنني تحقيق حلمي؟ :-)

شكرا مقدما على أي تلميح

brcontainer لست متأكدًا من أنني أفهم ما http://jsfiddle.net/tankchintan/92mra/4/

أتطلع حقًا إلى حل هذه المشكلة! :)

صديق أنت محيرة ، هناك toDataURL يجب تغيير حجمه ، يجب عليك تغيير حجم CANVAS .
أحاول إنشاء مثال ، لكن ما زلت لا أستطيع إنجاحه.

أهلا،

كنت أحاول اتباع هذه الاقتراحات للحصول على جودة صورة أفضل ، وهذا ليس واضحًا بالنسبة لي أيضًا.

brcontainer ، هل من الممكن أن توضح ، أو تغير / تنشئ كمان JS الذي ابتكره tankchintan ، بالأفكار التي تتحدث عنها؟ هذا غير منطقي بالنسبة لي ، حتى لو أنشأنا صورة بحجم 2x ، فإن البيكسل في الصورة لا يزال قائما بعد تحويل الصورة إلى 192 نقطة في البوصة.

مرحبًا يا شباب ، هل هناك المزيد من التعليقات حول هذه المشكلة؟ أواجه جودة صورة احترافية للغاية مع html2canvas مقارنة بشيء مثل PhantomJS حيث يمكنك تعيين zoomFactor (من بين تعديلات أخرى) لزيادة الجودة / الدقة.

عندى نفس المشكلة. لدي مطلب للحصول على لقطة من صفحة الويب في مستند PDF الذي أستخدم html2canvas فيه لتحويل div إلى صورة ثم أستخدم iTextsharp لإضافة الصورة إلى ملف PDF. ومع ذلك ، فإن الصورة التي تم إنشاؤها تبدو ضبابية بعض الشيء وتجعل من الصعب على العين مشاهدتها باستمرار. أريد أن أعرف ما إذا كان بإمكاني إنشاء صورة بدقة محددة في إنشاء الوقت نفسه في html2canvas.

أهلا،
لدي بالضبط نفس المتطلبات المذكورة أعلاه. ونفس المشكلة أنا أواجهها.
"الحصول على لقطة من صفحة الويب في مستند PDF الذي أستخدم html2canvas فيه لتحويل div إلى صورة ثم إضافة الصورة إلى ملف PDF."
ومع ذلك ، يبدو أن الصورة التي تم إنشاؤها ضبابية بعض الشيء.

لقد اتبعت الاقتراحات أعلاه ولكن ما زلت أحصل على صورة ضبابية.
هنا في الكود الخاص بي: ينشئ html2canvas لقطة لصفحة الويب بناءً على دقة النظام.
أنا أحصل على "لقطة" لصفحة الويب نفسها بأحجام مختلفة ، بناءً على دقة النظام.

مثال :
حجم الصورة: 816x422
حجم الصورة: 1193x437
حجم الصورة: 1275x437
هنا أتوقع: 2000 × 1784 البعد وما فوق.

هل من الممكن الحصول على هذا البعد من الصورة.
يرجى تقديم اقتراحاتك القيمة وشكرا على وقتك الثمين.

+1 لهذا. تتطلع إلى الحصول على صورة باستخدام html2canvas لإدراجها في ملف PDF ، ولكن بجودة ضبابية.

هل حاولت استخدام مصفوفة تحويل CSS على عقدة رئيسية للعنصر الذي ترغب في تصديره بدقة أعلى؟ هذا يعمل بالنسبة لي. على سبيل المثال "التحويل: مقياس (2 ، 2)"

mudcube عملت بشكل جزئي بالنسبة لي

brcontainer إنه يعمل بشكل جيد بالنسبة لي

هل يوجد حل موجود ؟؟ يرجى مشاركة كيفية تحسين دقة الصورة الباهتة ، ولا بد لي من إنشاء ملف pdf

+1 هل يوجد أي حل / إرشادات لهذا حتى الآن؟

أي حل موجود؟

يا رفاق ، استخدم transform: scale(2, 2) إنه يعمل.

هل يمكنك أن تعطي معلومات إضافية؟

matiasinsaurralde مباشرة قبل عمل لقطة شاشة ، أضف فئة css .x2 تحتوي على قاعدة css من أعلى إلى العنصر ، ثم أزل تلك الفئة في رد الاتصال html2canvas . ستحصل على عنصر مزدوج الحجم ولقطة شاشة بحجم مزدوج أيضًا. وهو سلس ، لذا من المحتمل ألا تلاحظ أي تغيير في الحجم.

لقطة شاشة عندما حاولت متابعة اقتراحك Ajaxy . أعتقد أن المشكلة في الكود الخاص بي؟ استغرق الأمر وقتًا طويلاً لعرض الصفحة

الحجم لم يزيد القرار بالنسبة لي. كان لا بد من حلها مع JS -
https://github.com/niklasvh/html2canvas/issues/379

أي حظ يا رفاق؟

transform: scale(2, 2); ليس هو الحل أيضًا لـ dygraph.js

premerddyn ، شاهد الحل الخاص بي في المشكلة المرتبطة.
إنه يعمل بشكل جيد ، لكنه يتطلب تكبيرًا قبل لقطة الشاشة.
إذا لم يكن تعليقي واضحًا ، فسأضيف المزيد من التوضيح

حسنًا ، ما فعلته هو إنشاء div بحجم مضاعف وجعله ينهار ، وكل محتوى لدي هنا قمت بنشره على div وأخذ لقطة شاشة. وبهذه الطريقة لا يتم فقدان وضوح الصورة وقد قمت بتعديل بعض كود حجم الخط لجعله أحصل على هذا العمل بشكل جيد ، لكن مشكلتي تكمن في ضربة النص وخلفية النص متعددة الأسطر.

التحجيم بمقدار 2 يعمل بالنسبة لي ، ومع ذلك ، أجد أن العرض مقيد بدقة / حجم النافذة. إذا كانت قيمة div التي تم تحجيمها أكبر من النافذة ، فسيتم قطع جزء منها

إذن ، أليست هناك طريقة لالتقاط لوحات بحجم أكبر من الشاشة؟

آه ، من هذا الموضوع:

var h = $(element)[0].ownerDocument.defaultView.innerHeight;
    $(element)[0].ownerDocument.defaultView.innerHeight = $(element).height();
    html2canvas($(element)).then(function(canvas) {
        $(element)[0].ownerDocument.defaultView.innerHeight = h;
        //Do whatever you want with your canvas
    }

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

حاولت تحقيق شيء عالي الدقة في هذا المثال ولكن لم أفهم ذلك ...

انقر فوق الزر تنزيل pngx2 ..

هل من الممكن إجراء عمليات على الواجهة الخلفية مثل عندما يتم النقر فوق الزر ، يتحول القماش إلى ضعف حجمه ثم يتم التقاط الصورة ثم يتم إعادة القماش إلى الحجم العادي ..

بالتأكيد ، يمكنك فعل ذلك. أقوم بتشغيل لوحة من الحجم الذي أريده باستخدام ملف
كود المقدمة. لقد وجدت أن الحصول على القيمة قد يكون غير دقيق ، لذلك أنا فقط
اضبط العرض / الارتفاع مباشرة.

في يوم السبت ، 7 مايو 2016 ، كتب enjoytheday [email protected] :

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

حاولت تحقيق شيء عالي الدقة في هذا المثال لكنني لم أحصل عليه
الذي - التي...

انقر فوق الزر تنزيل pngx2 ..

هل من الممكن إجراء عمليات على الواجهة الخلفية مثل النقر فوق الزر
يتحول القماش إلى ضعف حجمه ثم يتم التقاط الموافقة المسبقة عن علم ثم مرة أخرى
يتم إرجاع القماش إلى الحجم العادي ..

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرة أو قم بعرضه على GitHub
https://github.com/niklasvh/html2canvas/issues/241#issuecomment -217634634

أطول رسم توضيحي مستمر في العالم
ForeverScape.com http://www.foreverscape.com/ | تضمين التغريدة
https://twitter.com/foreverscape | على جيثب
https://github.com/vance/foreverscapecore | في الأخبار
http://www.foreverscape.com/art/reviews/

vance هل يمكنك ضبط هذا في مثال jsfiddle؟

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

حاولت ولكن لم يتم تعيينها من قبلي.

يمكنك تعديله بالكامل أو إنشاء واحدة جديدة.

سيكون مفيدًا للكثيرين: الراقص:

حاولت الاستهزاء بها بسرعة ولكن لم يكن لدي الوقت لإصلاح اختبار div. التقاط شيء باستخدام transform:scale() لا يفعل أي شيء لأن الارتفاع الداخلي لـ div _NOT_ يتأثر. لهذا السبب هو تحول. خصائصه بدون تغيير (داخليًا) ، والتي يمكنك اختبارها بالحصول على getBoundingClientRect() . يتم تغيير العرض / الارتفاع _actually_ فقط عند عرضها في سياق الأصل. يجب عليك انتزاع div الحاوية بعد تحجيمها.

https://jsfiddle.net/jano9ao4/1/

أواجه نفس المشكلة ، هل هناك أي حل عملي؟ ヾ (´ ･ ･ ｀｡) ノ "

تمكنت من تشغيله ، لالتقاط عناصر أكبر من النافذة. فقط تذكر ، لا يمكنك الحصول على صورة "أكبر" ببساطة من عنصر محوّل ، لأنه (لنفسه) ، لا يزال له نفس الأبعاد.

كان علي أن أقوم بعمل خاص بي في إطار iframe وأرسل بيانات base64 مرة أخرى كرسالة ... لأن القيام بفواصل التالي حدث تغيير حجم النافذة.

مرة أخرى مع التعليقات:

   //store the original size
    var h = $(element)[0].ownerDocument.defaultView.innerHeight;
    var w = $(element)[0].ownerDocument.defaultView.innerWidth;

   //set the document to the element's size
    $(element)[0].ownerDocument.defaultView.innerHeight = $(element).height();
    $(element)[0].ownerDocument.defaultView.innerWidth = $(element).width();

    html2canvas($(element)).then(function(canvas) {
        //restore the document size
        $(element)[0].ownerDocument.defaultView.innerHeight = h;
        $(element)[0].ownerDocument.defaultView.innerWidth = w;
        //Do whatever you want with your canvas
    }

لقد كتبت الوظيفة التالية للحصول بسهولة على لقطة شاشة بدقة DPI أعلى من عنصر HTML باستخدام html2canvas.

• إذا كان الارتفاع أو العرض مقيدًا (على سبيل المثال ، هناك عرض ثابت للجسم) ، فيجب إزالة القيود أثناء المعالجة - يجب أن يكون عنصر المصدر قادرًا على النمو إلى النطاق المطلوب
• يجب أن يكون srcEl عنصرًا موجودًا
• يجب أن يكون destIMG عنصر صورة موجودًا (فارغًا)
• يجب أن يكون dpi من مضاعفات 96

var makeHighResScreenshot = function(srcEl, destIMG, dpi) {
    var scaleFactor = Math.floor(dpi / 96);
    // Save original size of element
    var originalWidth = srcEl.offsetWidth;
    var originalHeight = srcEl.offsetHeight;
    // Save original document size
    var originalBodyWidth = document.body.offsetWidth;
    var originalBodyHeight = document.body.offsetHeight;

    // Add style: transform: scale() to srcEl
    srcEl.style.transform = "scale(" + scaleFactor + ", " + scaleFactor + ")";
    srcEl.style.transformOrigin = "left top";

    // create wrapper for srcEl to add hardcoded height/width
    var srcElWrapper = document.createElement('div');
    srcElWrapper.id = srcEl.id + '-wrapper';
    srcElWrapper.style.height = originalHeight*scaleFactor + 'px';
    srcElWrapper.style.width = originalWidth*scaleFactor + 'px';
    // insert wrapper before srcEl in the DOM tree
    srcEl.parentNode.insertBefore(srcElWrapper, srcEl);
    // move srcEl into wrapper
    srcElWrapper.appendChild(srcEl);

    // Temporarily remove height/width constraints as necessary
    document.body.style.width = originalBodyWidth*scaleFactor +"px";
    document.body.style.height = originalBodyHeight*scaleFactor +"px";

    window.scrollTo(0, 0); // html2canvas breaks when we're not at the top of the doc, see html2canvas#820
    html2canvas(srcElWrapper, {
        onrendered: function(canvas) {
            destIMG.src = canvas.toDataURL("image/png");
            srcElWrapper.style.display = "none";
            // Reset height/width constraints
            document.body.style.width = originalBodyWidth + "px";
            document.body.style.height = originalBodyHeight + "px";
        }
    });
};

استعمال:

var src = document.getElementById("screenshot-source");
var img = document.getElementById("screenshot-img");
makeHighResScreenshot(src, img, 192); // DPI of 192 is 4x resolution (2x normal DPI for both width and height)

هل وجدت أن القيام بذلك يؤدي أيضًا إلى كسر معالجات الأحداث window.onresize؟ لهذا السبب ، اضطررت إلى القيام بكل هذا داخل إطار iframe ونشر النتيجة مرة أخرى باستخدام parent.window.postMessage (البيانات) لإرجاع المحتويات. هذا يهمني فقط لأنه تطبيق جوال ، ومن الأهمية بمكان أن يكون لديك حريق صغير الحجم.

vance : في حالتي ، لا أحتاج أو أستخدم أيًا من هذه الأشياء - أنا أستخدم هذا بالفعل للتغلب على خطأ في عارض HTML إلى PDF. أرغب في رؤية مثال كامل لطريقتك ، يبدو أنها أكثر مرونة.

لقد اكتشفت طريقة أخرى للحصول على صورة عالية الدقة لا تحتاج إلى تغيير حجم الجسم. ومع ذلك ، يجب أن يتم تحديد موضع العنصر المصدر تمامًا بسبب خطأ في html2canvas (# 790 ، # 820 ، # 893 ، # 922 ، إلخ). استنادًا إلى كود شبكية العين لدى MisterLamb .

function takeHighResScreenshot(srcEl, destIMG, scaleFactor) {
    // Save original size of element
    var originalWidth = srcEl.offsetWidth;
    var originalHeight = srcEl.offsetHeight;
    // Force px size (no %, EMs, etc)
    srcEl.style.width = originalWidth + "px";
    srcEl.style.height = originalHeight + "px";

    // Position the element at the top left of the document because of bugs in html2canvas. The bug exists when supplying a custom canvas, and offsets the rendering on the custom canvas based on the offset of the source element on the page; thus the source element MUST be at 0, 0.
    // See html2canvas issues #790, #820, #893, #922
    srcEl.style.position = "absolute";
    srcEl.style.top = "0";
    srcEl.style.left = "0";

    // Create scaled canvas
    var scaledCanvas = document.createElement("canvas");
    scaledCanvas.width = originalWidth * scaleFactor;
    scaledCanvas.height = originalHeight * scaleFactor;
    scaledCanvas.style.width = originalWidth + "px";
    scaledCanvas.style.height = originalHeight + "px";
    var scaledContext = scaledCanvas.getContext("2d");
    scaledContext.scale(scaleFactor, scaleFactor);

    html2canvas(srcEl, { canvas: scaledCanvas })
    .then(function(canvas) {
        destIMG.src = canvas.toDataURL("image/png");
        srcEl.style.display = "none";
    });
};

استعمال:

var src = document.getElementById("screenshot-src");
var img = document.getElementById("screenshot-img");
takeHighResScreenshot(src, img, 2); // This time we provide desired scale factor directly, no more messing with DPI

تحرير: تم تقليل الاختراق باستخدام تحديد الموضع المطلق بدلاً من تحريك العنصر وتعديل الهوامش بالفعل ، وذلك بفضل @ jason-o-matic للاقتراح.

هذا يعمل مع أحدث إصدار (0.5.0 ألفا). ولكن ليس 0.4.1

إذا كنت تريد حل هذه المشكلة في 0.4.1 ، فعليك أن تتلاعب بحجم اللوحة القماشية.

مجرد ملاحظة سريعة لأي شخص يستخدم حلairdrummingfool (الذي يعمل بشكل رائع) ...

لا يمكن أن يكون لديك أي عناصر "نسبية" تغلف العنصر الذي ترغب في تفريغ الشاشة بغض النظر عن مدى ارتفاعها في xtree. يجب أن يتم تحويلهم إلى ثابت طوال مدة screendump بحيث يظهر العنصر الذي تريده فعليًا عند 0،0 بالنسبة إلى النافذة ، وليس DIV المحيط.

لقد استغرق الأمر عدة ساعات لأعمل على ذلك ، لذا آمل أن يساعد هذا شخصًا ما على تجنب نفس المشاكل.

مساء الخير شباب،
هل لدى أي شخص jsfiddle لحل

شكرا جزيلا على أي مساعدة يمكن تقديمها.

مرحبا جميعا! أحاول استخدام حل airdrummingfool . لكني حصلت على خطأ واحد مزعج. داخل العنصر الذي أريد الحصول على الصورة منه ، يوجد ملف عند تنفيذ الإجراء ، يصبح عنصر img فارغًا ويتم تجاهل src. هل تعرف كيف يمكنني حل هذا؟ هل واجه أي شخص هذه المشكلة من قبل باستخدام html2canvas؟

شكرا مقدما لهذا الموضوع! إنه ينقذني !! :د

تحرير: أنا أيضًا أحصل على نصف الصورة فقط. لكن الدقة تبدو مثالية xD

تم إصلاح مشكلة الصورة !! لم يتم تمكين useCORS! لكني ما زلت أحصل على نصف الصورة فقط.

رائعة! قد تكون الصورة النصفية ناتجة عن مشكلة العرض خارج اللوحة القماشية . لقد قدمت أيضًا طلب سحب لإضافة دقة / تحجيم إلى html2canvas ، فقد تجد أنه أسهل في الاستخدام من حل airdrummingfool .

حتى يتم دمج هؤلاء في html2canvas ، يمكنك الحصول على التصميم المخصص الخاص بي مع كل من هذه الإصلاحات وبعض إصلاحات الأخطاء الأخرى هنا .

مرحبًاeKoopmans. شكرا لإجابتك. لقد تمكنت للتو من إصلاح الصورة الخاصة بي بضرب الارتفاع في 2. ولكن ، أعتقد أنني أحصل على صورة أكبر بمسافات بيضاء أعلى وأسفل ... لذا ... سأحاول أن أجرب صورتك وأعد تقريرًا في غضون بضع دقائق !

OM (F) GeKoopmans .. لقد

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

airdrummingfool ... شكرا. يعمل بشكل مثالي.

يمكنك استخدام https://github.com/cburgmer/rasterizeHTML.js

يوفر لك أحدث إصدار من html2canvas خيارًا للقياس. يعمل بشكل جيد.

html2canvas (عنصر ، {
مقياس: 2
}) ؛

بالنسبة إلى عرض pdf متعدد الصفحات من html ومحتوى الصورة ، قد يؤدي تعيين scale: 1 إلى حل مشكلة الدقة وفي نفس الوقت تجنب الصور التي تتجاوز حدود pdf.

أعتقد أن هذا يساعد ، لقد استخدمت html2canvas

تحميل PDF() {
var doc = jsPDF جديد ({
التنسيق: "a4"
}) ؛

html2canvas (document.getElementById ("pdf-doc") ، {
مقياس: "5"
}). ثم (قماش => {
this.imgFile = قماش ؛
doc.addImage (this.imgFile، "JPEG"، 5، 5، 200، 285) ؛
doc.save ("اسم الملف" + ".pdf") ؛
}) ؛
}