Html2canvas: علامة الصورة لا يتم التقاطها

أنت تفتقد إلى التحميل المسبق للصور ، والذي هو بحد ذاته غير متزامن ، لذلك ستحتاج إلى لفه في عمليات الاسترجاعات. من المحتمل أنك تستخدم إصدارًا أقدم أيضًا ، لذلك أوصي بالحصول على أحدث إصدار من https://github.com/niklasvh/html2canvas/downloads ثم الاختبار باستخدام:

html2canvas( $('table'), {
   onrendered: function( canvas ) {
        var img = canvas.toDataURL();
        $('#calendar_to_canvas').attr('src', img);
   }
});

شكرًا للاستجابة السريعة ، لقد قمت بتنزيل أحدث إصدار وجربت الكود أعلاه ، ولا يزال لا يظهر علامة الصورة في اللوحة القماشية المعروضة. أفتقد شيئًا ما ، أضفت html2canvas.js و jquery.plugin.html2canvas واستخدام jquery 1.7. مساعدتكم هو موضع تقدير كبير.

هل الصور مستضافة تحت نفس أصل الصفحة التي تعرضها؟

قم بتعيين logging: true وتحقق مما تقوله وحدة التحكم عن الصور ، هل هم فشلوا؟

يتم تحميل الصور بشكل مثالي ، يرجى الاطلاع على السجلات أدناه:

html2canvas: يبدأ التحميل المسبق: العثور على صور الخلفية html2canvas.js: 27
html2canvas: البداية: الصور: 1/1 (فشل: 0) html2canvas.js: 27
html2canvas: البداية: الصور: 2/2 (فشل: 0) html2canvas.js: 27
html2canvas: البداية: الصور: 3/3 (فشل: 0) html2canvas.js: 27
html2canvas: start: images: 4/4 (فشل: 0) html2canvas.js: 27
html2canvas: البداية: الصور: 5/5 (فشل: 0) html2canvas.js: 27
html2canvas: البداية: الصور: 6/6 (فشل: 0) html2canvas.js: 27
html2canvas: start: images: 7/7 (فشل: 0) html2canvas.js: 27
html2canvas: التحميل المسبق: البحث عن الصور html2canvas.js: 27
html2canvas: التحميل المسبق: تم. html2canvas.js: 27
html2canvas: البداية: الصور: 8/18 (فشل: 0) html2canvas.js: 27
html2canvas: start: images: 9/18 (فشل: 0) html2canvas.js: 27
html2canvas: البداية: الصور: 10/18 (فشل: 0) html2canvas.js: 27
html2canvas: البداية: الصور: 11/18 (فشل: 0) html2canvas.js: 27
html2canvas: البداية: الصور: 12/18 (فشل: 0) html2canvas.js: 27
html2canvas: start: images: 13/18 (فشل: 0) html2canvas.js: 27
html2canvas: البداية: الصور: 14/18 (فشل: 0) html2canvas.js: 27
html2canvas: البداية: الصور: 15/18 (فشل: 0) html2canvas.js: 27
html2canvas: البداية: الصور: 16/18 (فشل: 0) html2canvas.js: 27
html2canvas: البداية: الصور: 17/18 (فشل: 0) html2canvas.js: 27
html2canvas: البداية: الصور: 18/18 (فشل: 0) html2canvas.js: 27
انتهى تحميل الصور: # 18 (فشل: 0) html2canvas.js: 27

تعذر الحصول على بيانات الصورة من قماش الرسم لأن اللوحة ملوثة ببيانات عبر الأصل.

html2canvas: Renderer: تم تنفيذ عرض Canvas - إرجاع canvas obj

يوجد ملف javascript والصورة في نفس الدليل بالإضافة إلى التعليق السابق.

مرحبًا niklasvh ، لقد عملت بشكل مثالي مع نفس مشكلة السياسة الأصلية الخاصة بها ، لقد حللت التشغيل في websever الذي كان يعمل محليًا مسبقًا باستخدام file: // يُنظر إلى هذا على أنه مشكلة عبر المجال. شكرا لتوجيهي في الاتجاه الصحيح. هذا مكون إضافي رائع :)

Niklashvh أحاول القيام بذلك لتطبيق android hybrid ، والذي يعمل محليًا باستخدام file: // هل يمكنك إرشادي لحل هذه المشكلة عبر المجال أو أي اقتراحات محل تقدير كبير.

إذا لم تكن بحاجة إلى تصدير الصورة إلى أي مكان ، فيمكنك دائمًا تعيين allowTaint: true

نقوم بتصدير الصورة إلى الذاكرة وإرسالها بصيغة pdf بالبريد الإلكتروني

لدي نفس المشكلة ، السجل كالتالي:

html2canvas: يبدأ التحميل المسبق: إيجاد html2canvas.js background-images: 21
html2canvas: التحميل المسبق: البحث عن الصور html2canvas.js: 21
html2canvas: التحميل المسبق: تم. html2canvas.js 21
html2canvas: البدء: الصور: 1/2 (فشل: 0) html2canvas.js: 21
html2canvas: start: images: 2/2 (فشل: 0) html2canvas.js: 21
انتهى تحميل الصور: # 2 (فشل: 0) html2canvas.js: 21
html2canvas: Renderer: تم تنفيذ عرض Canvas - إرجاع لوحة obj canvas

الصور موجودة في صورة الخلفية ، فقط قم بتحميل الصورة الرئيسية div ، لن يظهر النزلاء.

ليست مشكلة لأن الصور المتقاطعة في نفس المجال.

اي فكرة؟

إذا أضفت "حجم الخلفية: غطاء ؛" على الاسلوب الصورة لا تظهر ...

على ما يبدو هذه هي المشكلة

وقد نجحت !! ، فقط يجب أن أضع "حجم الخلفية: 100٪ 100٪ ؛" بدلاً من "background-size: cover؛"

لا يتم التقاط HTML @ Canvas عند استخدام عنوان url عبر الإنترنت مع img ، فما الحل لهذه المشكلة؟
شكرا

@ Elgamal10 استخدم الوكيل

https://github.com/brcontainer/html2canvas-php-proxy (وكيل html2canvas مع php)
https://github.com/brcontainer/html2canvas-asp-vbscript-proxy (وكيل html2canvas مع asp-classic - vb)
https://github.com/brcontainer/html2canvas-csharp-proxy (وكيل html2canvas مع asp.net - csharp)

ملاحظة: اقرأ الملف README.md

شكرًا لردك ، إنها لقطة شاشة جيدة ولكن هناك أخطاء مثل:

لم يتم تعريف html2canvas_5
لم يتم تعريف html2canvas_0
لم يتم تعريف html2canvas_5
لم يتم تعريف html2canvas_4
لم يتم تعريف html2canvas_1
لم يتم تعريف html2canvas_5

@ Elgamal10 خلق مشكلة في المشروع
https://github.com/brcontainer/html2canvas-csharp-proxy/issues؟state=open

أعتقد أنك تستخدم C # (ASP.NET) ، هل أنا على صواب؟

مرحبًا نيكلاس ،

لقد بدأت في استخدام واجهة برمجة التطبيقات الخاصة بك وهو أمر رائع .. لكنني عالق ، هل يمكنك المساعدة ..

أحاول تحويل HTML إلى قماش باستخدام الكود:
jQuery ('html'). html2canvas ({
الوكيل: " http: //localhost/myproject/proxy.jsp " ،
userCORS: صحيح ،
onrendered: الوظيفة (قماش) {
تنبيه (قماش) ؛
var url = canvas.toDataURL ("image / png") ؛
window.open (url، '_blank') ؛
} ،
}) ؛

لدي الآن ملف يسمى proxy.jsp يحفظ جميع صور الأصل المتقاطع في المسار ~ / tomcat / myproject / images / "

بعد ذلك أرى هذا في وحدة التحكم
تم تفسير المورد على أنه برنامج نصي ولكن تم نقله باستخدام نوع MIME image / jpeg: " http: //localhost/myproject/proxy.jsp؟ url = http٪ 3A٪ 2F٪ 2Fi.ebayi … QYEAAMXQVERSuVtL٪ 2F٪ 24_1.JPG٪ 3Fset_id٪ 3D8800004005 & callback = html2canvas_64 ". html2canvas.js: 2264

بعد كل هذا ، لم يتم تنفيذ وظيفة رد الاتصال الخاصة بي ولا يمكنني إنشاء لوحة قماشية ..

ماذا يمكن ان يفعل؟ يمكنك الرجاء المساعدة؟

تشكرات

@ himakshi89 لا يمكنك استخدام proxy: و userCORS: في نفس الوقت.

تفضل استخدام الوكيل.
ملاحظة: حاول التقاط الجثة.

في التعليمات البرمجية الخاصة بك به فاصلة متبقية:

},//this is wrong.

});

ما هو إصدار html2canvas الخاص بك؟

جرب هذا:

jQuery('body').html2canvas({
    "onrendered": function(canvas) {
    }
});

إذا لم تنجح ، فحاول تنزيل html2canvas هذا https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js واستخدم هذا الكود:

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

تضمين التغريدة
أهلا

لقد قمت بتعديل الكود الخاص بي وأقوم الآن بإرسال الرد من proxy.jsp كـ
({"html2canvas_67": http: //localhost/myproject/0.1651487380333363.jpg "})

لا توجد أخطاء تظهر في وحدة التحكم الآن.
لكن لا شيء يحدث الآن .. ماذا يجب أن يحدث أم أن هناك مكان بحاجة للتغيير؟

الرجاء المساعدة

ولكن بما أن وحدة التحكم لا يمكن أن تظهر أي شيء
هل استخدمت نموذج الكود الثاني الخاص بي؟ يرسل سجلات إلى وحدة التحكم.

حاول توفير طريقة الشفرة عبر الإنترنت للاختبار.

كما هو مقترح قمت بإزالة useCORS واستبدال html بالجسم

jQuery ("body"). html2canvas ({
الوكيل: " http://nisquare.dyndns.org : 8087 / facebook / proxy.jsp" ،
التسجيل: صحيح ،
onrendered: الوظيفة (قماش) {
var url = canvas.toDataURL ("image / png") ؛
window.open (url، '_blank') ؛
}
}) ؛

أنا أيضا أتلقى هذه هي وحدة التحكم الخاصة بي
html2canvas: خطأ في التحميل : http://cmsip.tradus.ibcdn.com/MOBMKXE29ULYUMKH_4902586_320x360.jpg html2canvas.js: 21

لقد أرفقت لقطة شاشة لما أحصل عليه

لقد حاولت تنزيل https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js

وهذا الرمز:

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

أم لا؟

ملاحظة: http://nisquare.dyndns.org:8087/facebook/proxy.jsp مكسور!

لقد قمت بتنزيل أحدث إصدار

استبدل الكود بما يلي

html2canvas ($ ("body"). get (0)، {
الوكيل: " http://nisquare.dyndns.org : 8087 / facebook / proxy.jsp" ،
التسجيل: صحيح ،
onrendered: الوظيفة (قماش) {
var url = canvas.toDataURL ("image / png") ؛
window.open (url، '_blank') ؛
}
}) ؛

أرسل لي اختبار الارتباط

أنا أستخدم هذا الامتداد chrome وما زال الامتداد في وضع التطوير

"Chrome extension" مع JSP؟

يتم استخدام jsp فقط للجزء الوكيل .. وفقًا لك ، ما هو الأفضل؟

تعمل إضافة Chrome في "بروتوكول" و "إطار" آخر ، يستخدم proxy.jsp بروتوكول HTTP.

أعتقد أن ملحقات الكروم لا تتطلب وكيل. استخدم مثل:

html2canvas($("body").get(0), {
    "logging": true,
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

اقرأ: http://developer.chrome.com/extensions/tut_debugging.html

تضمين التغريدة
مرحبًا ، شكرًا على الفكرة .. نحن الآن نستخدم واجهة برمجة تطبيقات مقدمة من Chrome نفسه. يحتوي على وظيفة chrome capturevisibletab التي تحل المشكلة بسهولة شديدة :)

@ jgab-net شكرا جزيلا لك. طريقة البحث طويلة جدا عن الخطأ

@ Sumit8 (ص) على الرحب والسعة

gitbala هل تم حل مشكلتك؟ niklasvh هل يمكن إغلاق هذه القضية؟ (سأتوقف عن فرز الأخطاء إذا كان هذا مزعجًا .. :)

usmonster ، بكل الوسائل ، استمر ، يوفر لي بعض الوقت للبحث في كل مشكلة مفتوحة :)

نعم تم حلها :)

في يوم الإثنين ، 1 سبتمبر 2014 الساعة 4:11 صباحًا ، كتب usmonster [email protected] :

gitbala https://github.com/gitbala هل تم حل مشكلتك؟ تضمين التغريدة
https://github.com/niklasvh هل يمكن إغلاق هذه المشكلة؟ (سأتوقف مع
فرز الأخطاء هذا أمر مزعج .. :)

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

أنا أستخدم html2canvas - الصورة المحلية لا تظهر في pdf. ما الحل لهذا؟

niklasvh الرجاء المساعدة - لا يتم عرض صورة الشعار في html

لقد فشلت عند تحويل صورة مضمنة. كيفية استخدام "proxy": " http: //localhost/myproject/proxy.jsp " ، أستخدم vue ، حيث أضع هذا jsp ولا أعرف كيفية استخدام niklasvh ، هل يمكنك يساعد؟

qiuyaofan لديه نفس المشكلة هل حصلت على الحل؟ أنا أستخدمه مع angular2 وأحصل على صور من خادم آخر. gitbala هل حصلت على الحل؟

+1 راجع للشغل ، تبدو السجلات جيدة ( html2canvas: Images loaded, starting parsing ) لكن ما زلت لا أرى الصور على ملف pdf.

أنا استخدم

allowTaint: صحيح ،
useCORS: صحيح ،
الاختبار: خطأ ،

qiuyaofanNikhilRadadiya الرجال، أيضا كان يبحث عن حل عادل العميل. استخدام vue js والحصول على صورة من giphy. إذن ، هذا هو الشيء الذي يعمل جيدًا بالنسبة لي:

html2canvas(element, {
        "logging": true, //Enable log (use Web Console for get Errors and Warings)
        useCORS: true,
        taintTest: false,
        onrendered: function(canvas) {
          var img = new Image();
          img.onload = function() {
            document.body.appendChild(img);
          };
          img.error = function() {
            if(window.console.log) {
              window.console.log("Not loaded image from canvas.toDataURL");
            } else {
              alert("Not loaded image from canvas.toDataURL");
            }
          };
          img.src = canvas.toDataURL("image/png");
        }
      });

لذلك لم يتم استخدام وكيل.

creepteed لدي عنصر آخر أحتاج إلى تحويله إلى قماش ثم حفظه في pdf ، لا يحتوي html الخاص بي على صور فقط ، إذا كانت هذه هي الحالة فكيف يمكنني استخدام الوظيفة أعلاه التي نشرتها؟

مرحبًا niklasvh ،
أريد التقاط صفحة ويب باستخدام htmltocanvas ، كل شيء يعمل بشكل جيد ولكن عندما أحاول التقاط صفحة ويب ، لا أحصل على الصور.
هل يمكنك مساعدتي؟
هذا هو الكود الخاص بي:
function capture(div_id=null) { jQuery(".screenshot_row_target").html2canvas({ logging: true, //taintTest : true, //proxy: "https://skeleton-21.myshopify.com", onrendered: function (canvas) { jQuery('#screenshot_img_val').val(canvas.toDataURL("image/png")); //document.getElementById("screenshot_html_form").submit(); } }); }

في وحدة التحكم ، أحصل على هذا
html2canvas: Preload starts: finding background-images html2canvas.js:19 html2canvas: Preload: Finding images html2canvas.js:19 html2canvas: Preload: Done. html2canvas.js:19 html2canvas: start: images: 0 / 0 (failed: 0) html2canvas.js:19 Finished loading images: # 0 (failed: 0) html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/files/1/2186/4293/files/user2_300x300.png?v=1503661428 html2canvas.js:19 html2canvas: Error loading background: html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_300x300.gif html2canvas.js:19 html2canvas: Renderer: Canvas renderer done - returning canvas obj
شكرا.