Html2canvas: تم إيقاف "SVGElement.offsetWidth" وستتم إزالته في M50 ، في حوالي أبريل 2016

تم إنشاؤها على ٩ أبريل ٢٠١٦ · 26تعليقات · مصدر: niklasvh/html2canvas

رفضت Google دعم "offsetWidth" لـ SVG.
هل توجد أفكار؟

الوثيقة: https://www.chromestatus.com/features/5724912467574784

مصدر

alex-wdmg

التعليق الأكثر فائدة

لقد قمت بحلها ... سأضيف الحل في نهاية الأسبوع إذا كنت
خذ وقتك. آسف على التأخير ... إنه يعمل على FF و Safari و Chrome.
أفضل.
يوم الأربعاء ، 29 يونيو 2016 الساعة 19:00 ، كتب Yuki K [email protected] :

Dayjo https://github.com/Dayjo نعم ، لقد لاحظت هذا أيضًا. SVGs هي
تمامًا في الموضع الخاطئ وغالبًا ما تكون خارج الشاشة الآن
يتم تقييم كل الإزاحة إلى غير معرّف. أنا أيضا حاولت يدي في الحل
هذا باستخدام getBoundingClientRect التكراري - لكن لا حظ :( سآخذ a
انظر إلى فرعك.
-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/niklasvh/html2canvas/issues/846#issuecomment -229420457 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe/ABWsecUQ2l-rxisMZ4HCKu1nh-mbIMU1ks5qQqSQgaJpZM4IDr12
.

chemitaxis في ٢٩ يونيو ٢٠١٦

🎉3

ال 26 كومينتر

كان على وشك رفع هذا! شيء قلق قليلاً سيتوقف عن العمل هذا الشهر.

Dayjo في ١٢ أبريل ٢٠١٦

نعم ، على ما يبدو في أوبرا 37 بيتا لا يعمل. بالإضافة إلى ذلك ، فإن أحدث إصدار من المكونات الإضافية لعرض الخلفيات والحدود. لدي واحد ، هم لا تحقق؟

في العرض أيضًا ، لا تظهر الخلفيات والحدود ((

alex-wdmg في ١٢ أبريل ٢٠١٦

هذه مشكلة كبيرة حيث لن يتم عرض صور SVG الخاصة بنا بعد الآن.

يقع الجاني الأكبر في هذه الوظيفة:

function offsetBounds(node) {
    var parent = node.offsetParent ? offsetBounds(node.offsetParent) : {top: 0, left: 0};

    return {
        top: node.offsetTop + parent.top,
        bottom: node.offsetTop + node.offsetHeight + parent.top,
        right: node.offsetLeft + parent.left + node.offsetWidth,
        left: node.offsetLeft + parent.left,
        width: node.offsetWidth,
        height: node.offsetHeight
    };
}

lines 1887 - 1898 في html2canvas.js

كل offsetTop, offsetLeft, offsetWidth, offsetHeight غير معرّف الآن لـ SVGs

الحل الموصى به هو getBoundingClientRect() ، لكن لا يزال يتعذر تشغيله.

هل لأحد حل لهذا؟

MarcBalaban في ١٩ أبريل ٢٠١٦

MarcBalaban لم

if ( node.tagName === 'SVG' ) {
    return node.getBoundingClientRect();
  }

Dayjo في ١٩ أبريل ٢٠١٦

Dayjo للأسف لا ، إنه بالتأكيد على الطريق الصحيح ، لكن هذا الخط

var parent = node.offsetParent ? offsetBounds(node.offsetParent) : {top: 0, left: 0};

لا ينفذ بشكل صحيح إما لأنه تم إهلاك الأصل أيضًا:

MarcBalaban في ١٩ أبريل ٢٠١٦

حسنًا ، بالنظر إلى الأمر أكثر من ذلك بقليل ، قد يحتاج إلى استخدام شيء مثل دالة getBoundingBoxInArbitrarySpace هنا ؛ https://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/svg.js وفقًا لـ http://stackoverflow.com / questions / 5996005 / how-to-use-element-offsetparent-with-html-svg-element # إجابات

لم تتح الفرصة لإجراء أي نوع من الاختبارات حتى الآن.

Dayjo في ٢٠ أبريل ٢٠١٦

أي أخبار عن هذا الموضوع؟ شكرا!

chemitaxis في ١٩ مايو ٢٠١٦

chemitaxis - بالرغم من التحذير ، لم أواجه أي مشاكل حتى الآن مع نتيجة html2canvas. ومع ذلك ، من يدري ما إذا / متى سيتم تنفيذ هذا التغيير بالفعل في Chrome

Dayjo في ٧ يونيو ٢٠١٦

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

niklasvh - أي أفكار حول هذا؟ إذا كان لدي الوقت لحسن الحظ سأحصل على باش في الإصلاح لكنني choca في الوقت الحالي.

Dayjo في ٢٨ يونيو ٢٠١٦

حصلت على لقطة لهذا باستخدام https://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/svg.js

لكن لم أكن متأكدًا من المكان الذي أحتاج إليه لتنفيذه ، فقد حاولت استخدام كل من الوظيفة offsetBounds و getBounds لكن دون جدوى. يبدو أن الوصلات X و Y صحيحة ، لكن العرض والارتفاع خاطئان ، ولست متأكدًا مما إذا كان هذا لأنني أستخدم css لجعل عرض SVG 100٪ للحاوية والارتفاع التلقائي. قد تحتاج إلى إجراء بعض الاختبارات المكثفة.

لدي فرع أولي هنا (https://github.com/Dayjo/html2canvas/tree/issue-846) ، باستخدام أحدث التزام تجريبي. إذا أراد أي شخص الاختبار ، فيجب أن يكون قادرًا على استخدام الإصدار dist ، أو إعادة البناء فقط إذا كنت ترغب في ذلك. لا توجد فكرة عن مدى نجاح / ما إذا كان سيعمل على الإطلاق.

Dayjo في ٢٨ يونيو ٢٠١٦

Dayjo نعم ، لقد لاحظت هذا أيضًا. إن SVGs في الموضع الخاطئ تمامًا ودائمًا ما تكون خارج الشاشة الآن بعد أن تم تقييم جميع الإزاحات على أنها غير محددة. لقد جربت يدي أيضًا في حل هذا باستخدام getBoundingClientRect التكراري - لكن لم يحالفني الحظ :( سألقي نظرة على فرعك.

sumigoma في ٢٩ يونيو ٢٠١٦

Dayjo https://github.com/Dayjo نعم ، لقد لاحظت هذا أيضًا. SVGs هي
تمامًا في الموضع الخاطئ وغالبًا ما تكون خارج الشاشة الآن
يتم تقييم كل الإزاحة إلى غير معرّف. أنا أيضا حاولت يدي في الحل
هذا باستخدام getBoundingClientRect التكراري - لكن لا حظ :( سآخذ a
انظر إلى فرعك.
-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/niklasvh/html2canvas/issues/846#issuecomment -229420457 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe/ABWsecUQ2l-rxisMZ4HCKu1nh-mbIMU1ks5qQqSQgaJpZM4IDr12
.

chemitaxis في ٢٩ يونيو ٢٠١٦

🎉3

تضمين التغريدة نتطلع إلى الإصلاح.

sumigoma في ٢٩ يونيو ٢٠١٦

مرحبًا chemitaxis ، هل يمكنك إنشاء

sumigoma في ٧ يوليو ٢٠١٦

👍1

chemitaxis أي تقدم في هذا؟ آمل في اختبار الكود في مشروع أقوم به لمعرفة ما إذا كان يحل جميع مشكلات SVG خاصةً مع IE.

atdiff في ٢١ يوليو ٢٠١٦

مرحبًا atdiff :) لقد قمت بحل المشكلة باستخدام مكتبات أخرى ...

إنه ليس حلاً ولكني وجدت حلاً بسيطًا. لم أتمكن أيضًا من عرض SVG بشكل صحيح في Chrome ولكن سيتم عرضه في Safari. كل ما فعلته هو إضافة سمة عرض إلى عنصر SVG المضمن. حتى مع وجود سمة عرض غير دقيقة ، يتم طباعتها كما ينبغي في كل من Chrome و Safari:

    var deferred = $q.defer();

    element.find('svg').attr('width', '100px');

    html2canvas(element, {
        background: '#eee',
        onrendered: function(canvas) {
            var a = document.createElement('a');
            a.href = canvas.toDataURL('image/jpeg', 1).replace('image/jpeg', 'image/octet-stream');
            a.download = fileName + '.jpg';
            a.click();
            deferred.resolve();
        }
    });

    return deferred.promise;

تحرير: شيء تضيفه غير مرتبط ولكن قد يجده الآخرون مفيدًا عند البحث هنا. لا يبدو أن Firefox يعمل بالطريقة المذكورة أعلاه. كان لدى SVG # علامات للألوان السداسية (على سبيل المثال: #ccc). نظرًا لأن هذه الأحرف محجوزة في عناوين URL وكان Firefox صارمًا بشأنها ، لم يظهر SVG. لقد استبدلت بقيم rgb بدلاً من ذلك ، والآن يتم عرض Firefox بشكل صحيح.

jgunderson-IAS في ٢٠ أكتوبر ٢٠١٦

@ jgunderson-IAS شكرًا على هذا سأجربه كحل سريع.

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

niklasvh لست متأكدًا مما إذا كنت قد نظرت إلى هذا على الإطلاق ، أو إذا كان لديك أي اقتراحات حول أفضل السبل لتنفيذ الإصلاح (راجع: https://github.com/niklasvh/html2canvas/issues/846#issuecomment-229035694 )

Dayjo في ٢١ أكتوبر ٢٠١٦

@ jgunderson-IAS لقد قمت بتحديد حجم SVGs بشكل صريح ، وبينما يعني هذا النهج المبتكر أنه يتم عرضها ، يبدو أن الحجم غير متسق ، فأنا أقوم بتعيين خصائص الطول والوزن ومع ذلك تظهر بشكل منتظم "مضغوطة" ". لسوء الحظ ، تعتمد صفحاتي على أحجام svg التي يتم التحكم فيها بواسطة CSS وكونها 100٪ من الحاوية الخاصة بها ، لذلك في حين أن هذا يمثل نقطة انطلاق ، أعتقد أنني سأضطر إلى النظر في إعادة تشفير المكتبة لحساب الأحجام بشكل صحيح

Dayjo في ٢٤ أكتوبر ٢٠١٦

فيما يلي مثال على كيفية عرض svgs الآن بعد أن قمت بتعيين العرض في حدث "onClone" استنادًا إلى عرض العنصر الأصل (يتم تعيين جميع svgs على عرض 100٪ في css) ، ويبدو أن الارتفاع يفسد الأمر أكثر ؛

لغة البرمجة

اللوحة القماشية

أنا استخدم؛

onclone: function(doc){
    var w,h;
    var svgs = doc.querySelectorAll('svg');
    for ( var s = 0; s < svgs.length; ++s ) {
        w = svgs[s].parentElement.offsetWidth;
        svgs[s].setAttribute('width', w );
    }
}

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

Dayjo في ٢٤ أكتوبر ٢٠١٦

لسوء الحظ ، اضطررت إلى التخلي عن استخدام html2canvas واستخدام حل من جانب الخادم بدلاً من ذلك ( wkhtmltoimage ) على وجه التحديد لأنه لا يمكنه عرض svgs بدقة. لم أتمكن من تشغيله باستخدام getBoundingClientRect أو getBBox إلخ

Dayjo في ٢٤ أكتوبر ٢٠١٦

ثابت في 1.0.0