Html2canvas: مساحة بيضاء إضافية على اليسار والجزء المفقود على اليمين

شكرًا على المعلومات التفصيلية ، دون تصحيح الأخطاء كثيرًا ، يبدو أنها مشكلة في ظهور / عدم ظهور أشرطة التمرير وتغيير عرض المستند ، مما يؤدي إلى تعويض التوسيط. سنحاول العمل على إصلاحه في أسرع وقت ممكن

أواجه نفس المشكلة وبالفعل يبدو أنها مرتبطة بأشرطة التمرير. في chrome يمكنني إخفاء أشرطة التمرير باستخدام webkit وهو يعمل بشكل جيد ولكن ليس هو الحال بالنسبة للمتصفحات الأخرى.

الحل الخاص بي هو إخفاء أشرطة التمرير قبل التقديم

أقوم بإضافة الفئة أدناه إلى عنصر "html"

.hide-scrollbar {
    overflow: -moz-hidden-unscrollable;
    overflow: hidden;
}

ثم قم بإزالته بعد التقديم

$("html").addClass("hide-scrollbar"); //hide scrollbar because it is showing left white padding
html2canvas($(".artwork")[0]).then(function(canvas) {
    var dataURL = canvas.toDataURL();
    $(".renderedimg img").attr("src",dataURL);
});
$("html").removeClass("hide-scrollbar");

مؤكد. في حالتي دائمًا 7 بكسل (Chrome لنظام التشغيل Windows). يضيف الحشو إلى هذا.

نظرًا لأنني لا أستخدم jQuery ، فقد فعلت هذا بدلاً من ذلك:

                document.documentElement.classList.add("hide-scrollbar");
                document.documentElement.classList.remove("hide-scrollbar");

لكن الحل الحقيقي سيكون بالطبع المفضل والتقدير.

فيما يتعلق بالخيارات ، أعطى هذا أفضل نتيجة (تم تعيين العرض مسبقًا لملف div التغليف):

                        {
                            logging: true,
                            allowTaint: false,
                            backgroundColor: "#ffffff",
                            scale: 1
                        }

إذا لم أستخدم "scale: 1" فقد تم توسيعه عند استخدام نص تم تغيير حجمه في Windows. نحتاجه بشدة على شاشة كمبيوتر محمول عالية الدقة.

إذا كانت مثيرة للاهتمام يمكنني نشر حالة الاستخدام الخاصة بي.

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

لون الخلفية: لا شيء ،
scrollX: 0 ،
scrollY: -window.scrollY ،
مقياس: 1

أحد الحلول الخاصة بي.
html2canvas (عنصر ، {
العرض: $ (element) .width () ، // المشكلة هي أن اللوحة القماشية أكبر قليلاً من العنصر ، لذلك تحتاج إلى تعيينها هنا
})

لقد قمت بحل جميع المشاكل المحتملة على النحو التالي ..

html2canvas(element , {
        scrollX: -window.scrollX,
        scrollY: -window.scrollY,
        windowWidth: document.documentElement.offsetWidth,
        windowHeight: document.documentElement.offsetHeight
})