html2canvas البرنامج التعليمي؟[مغلق]

Question

مغلق. هذا السؤال هو خارج الموضوع.لا يقبل حاليا الإجابات.

---

هل ترغب في تحسين هذا السؤال؟ تحديث السؤال إذن كذلك عن الموضوع لتجاوز سعة المكدس.

مغلق منذ 5 سنوات.

أرغب في استخدام html2canvas ولكن ليس لدي أي فكرة عن كيفية ذلك.

لا أقصد الإساءة إلى Hertzen، فقد صنع نصًا رائعًا، لكن التوثيق غير كامل، لذا فهو عديم الفائدة إلى حد ما.

لقد ألقيت نظرة على JSFeedback لكن النص بأكمله (الذي اضطررت إلى "سرقته" من مصدر HTML) يعمل فقط مع نسخته من html2canvas والتي يقول، في التعليقات، إنها غير جاهزة للاستخدام مفتوح المصدر.

سيكون موضع تقدير أي مساعدة حقا - Apparatix.

Answer 1

يأخذ html2canvas بشكل أساسي كل شيء في كائن DOM الذي تحدده - جميع العناصر الفرعية وأطفالهم وما إلى ذلك.- وينسخها في كائن Canvas (الموجود في متغير Canvas الذي تم تمريره إلى الوظيفة) استنادًا إلى خصائصها المتنوعة، بما في ذلك الحدود والمحتوى والأنماط وما إلى ذلك.تقوم Canvas.toDataURL() بتحويل محتويات لوحة Canvas هذه إلى مجموعة من الأحرف التي تمثل صورة يمكن استخدامها كـ src في علامة، أي.

<img src=imgdataurl>

أو تعيين صورة خلفية عبر javascript/jquery، مثل هذا --

$('#someDiv').css('background-image','url('+imgdataurl+')')

إذا لم ينجح الأمر بالنسبة لك، فمن المحتمل أنك تحدد عنصر DOM أصلًا غير صحيح - يمكنك تجربة $('body') بدلاً من $('#myObj') ومعرفة ما إذا كان هناك أي شيء سيحدث.

Answer 2

أعط هذه دوامة --

في ملف Index.html، أضف ملفات جافا سكريبت التالية:

<script type="text/javascript" language="javascript" src="js/jquery.js">
</script>
 <script type="text/javascript" language="javascript" src="js/html2canvas.min.js">
</script>
<script type="text/javascript" language="javascript" src="js/jquery.plugin.html2canvas.js">
</script>

يمكنك تحميل الحلقتين الأخيرتين من:https://github.com/downloads/niklasvh/html2canvas/v0.34.zip

في جافا سكريبت، يمكنك بعد ذلك كتابة التعليمات البرمجية (استبدال #myObjectId بمحدد JQuery صالح):

$('#myObjectID').html2canvas({
    onrendered : function(canvas) {
    var img = canvas.toDataURL();
    // img now contains an IMG URL, you can do various things with it, but most simply:
        $('<img>',{src:img}).appendTo($('body'));
            }
        });