Html2canvas: مشكلة توليد صورة الخريطة (خرائط جوجل)

المشكلة هي أن خرائط Google تستخدم مصفوفة تحويل CSS3 ، والتي لم يتم تنفيذها بالكامل في html2canvas.

كيف افعل

صور خرائط جوجل (الصور في خادم خارجي)؟

استخدام الوكيل: https://github.com/niklasvh/html2canvas#how -does-it-work

brcontainer: أعتقد أنه غير قانوني (الوصول إلى مربعات الخرائط مباشرة من جهاز كمبيوتر آخر / وكيل /). الطريقة الوحيدة هي استخدام CORS.

bkralik proxy ليس لك فقط للوصول إلى "المواقع المحجوبة" ، مصطلح الوكيل يعني شيئًا آخر في حالة استخدام وكيل html2canvas لجعل واجهة برمجة تطبيقات javascript تفتح الصور من الخوادم الخارجية كما لو كانت على موقعك المحلي.

يقوم الوكيل بجعل الخادم الخارجي الذي تم تنزيله ولا يقوم html2canvas بتحميل الصورة إلا بعد اكتمال التنزيل.

اقرأ هذا http://en.wikipedia.org/wiki/Same_origin_policy حتى تفهم الموضوع.

كيف أستخدم هذا الوكيل؟

الرابط الذي استهلكته جميع الروابط لاستخدام الوكيل (بلغات php ، C # (asp.net) ، python و VB (asp classic)).

ربما لم تلاحظ الروابط إلى الوكلاء ، فسأعطيك هنا:
https://github.com/niklasvh/html2canvas/wiki/Proxies

عند استخدام مكتبة جديدة ، من الجيد دائمًا قراءة README بالكامل.

brcontainer أعلم ما يفعله هذا الوكيل - عندما يريد العميل التقاط لقطة شاشة لصفحة ، يقوم SERVER بتنزيل جميع الصور إلى المجلد المحلي ثم يقوم العميل بتحميلها. لكن هذا خطأ - لأن Google لا تسمح بالاستخدام المباشر لخوادمها المبلطة - ومن وجهة نظرهم ، يقوم شخص ما فجأة بتنزيل الكثير من المربعات إلى الخادم دون مشاهدة صفحة الويب ...

أنا أستخدم Java.
لديك مثال على استخدام الوكيل؟

brcontainer وكما ذكرت ، هناك بالفعل مشكلة في تحويلات CSS3 ، لأن خرائط googlemap التي تعمل على Google Chrome تستخدمها ، لذا فإن الخريطة غير قابلة للفحص مع التنفيذ الحالي. صدقني ، لقد واجهت هذه المشكلة في المشروع الذي كتبته ...

bkralik إذن ، كيف أفعل؟
هل لديك مثال؟

أنا أبرمج في جافا أيضًا (لقد قمت بالفعل بإنشاء وكلاء في PHP و C # و VB) ، لكنني لست في الوقت المناسب لإنشاء وكيل في Java ، ربما يمكنني القيام بذلك يوم الأحد.

تطبيقه هو JSP أو "Java Desktop"؟

brcontainer إنه

DanielSBelo JSF framework لم أستخدمه مطلقًا ، أنا

[محرر]
حول دعم تحويلات css ، اقرأ: https://github.com/niklasvh/html2canvas#contributing

DanielSBelo هل وجدت حلاً جيدًا لهذا؟ انا لدى نفس المشكله.

يعمل حفظ الخريطة كلوحة رسم بشكل جيد في Firefox ، لكنه يفشل في حفظ الخريطة في Chrome. لا أعتقد أنه مرتبط مباشرة بالتحول ، ولكن على الأرجح الطريقة التي يتعامل بها Chrome مع CORs. أنا عالق تمامًا في محاولة العثور على إجابة.

TGOlson إنها مشكلة حقيقية في تحويلات CSS3 ، لأن الإصدار الحالي من html2canvas قادر على عرض "مستوى واحد" فقط من التحويل - لا يقوم بتكديسها.
يمكنك التحقق من أن المشكلة تكمن في عمليات التحويل ببساطة عن طريق اللعب باستخدام خرائط Google - عادةً ما يتم تقديم لقطة شاشة مثل هذه:

(في css ، يتم وضع الخريطة بالكامل بشكل صحيح ولكن بعد تعطيل css3 ، يحدث هذا)
الحل الوحيد هو تنفيذ حزمة تحويلات css3 بالكامل. لا أعرف ، إذا كان الأمر قيد التقدم بواسطة Niklas ، ولكن يجب على أحد القيام بذلك :-)

الاشتراك

لدي أيضًا نفس المشكلة - فقط في Chrome. أنا أستخدم html2canvas-proxy-php. المتصفحات الأخرى تعمل بشكل جيد. أجزاء من الخريطة مفقودة فقط .. يبدو أنها مرتبطة بتغيير حجم الخريطة ، وإضافة / إزالة التراكبات ، وما إلى ذلك

لمعلوماتك - إذا كنت بحاجة إلى الحصول على بعض وظائف التقاط الخرائط وتشغيلها بسرعة ، فيمكنك دائمًا استخدام التجوّل الافتراضي من Google أو واجهة برمجة التطبيقات للخرائط الثابتة. بشكل أساسي ، أعد بناء ما يبحث عنه المستخدم الحالي على الخريطة ( map.getPov ، إلخ.) ثم احصل على تلك الصورة الثابتة من google.

لا أعتقد أن هذا النهج يعمل مع التراكبات

لقد عثرت للتو على هذه المشكلة. إذا لم أكن مخطئًا ، فإن سؤال التكديس هذا يعرض هذه المشكلة وقد قدمت حلاً بديلاً عن طريق قراءة تحويلات css3 وتطبيقها كمواضع CSS عادية.

var transform=$(".gm-style>div:first>div").css("transform")
var comp=transform.split(",") //split up the transform matrix
var mapleft=parseFloat(comp[4]) //get left value
var maptop=parseFloat(comp[5])  //get top value
$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
  "transform":"none",
  "left":mapleft,
  "top":maptop,
})

ربما ، يمكن فحص تحويلات css3 وتحويلها تلقائيًا إلى موضع CSS عادي أثناء العرض ثم إزالتها بعد التصيير.

لدي وظيفة التقاط شاشة غير ثابتة.
يعمل بعد إعادة تحميل الصفحة بالكامل (باستخدام CTLR + R على Firefox)

هذا هو الكود الخاص بي ، ما يفعله بشكل أساسي هو إنشاء صورة 64 base / png لشاشة مطبوعة ملتقطة من النافذة والنتيجة النهائية التي وضعتها في علامة لمعرفة ما إذا كان يعمل.

ها هي الوظيفة

وظيفة ebfPrintScreen (اسم المكون)
{
html2cavnas
([document.body]،
{
التسجيل: صحيح ،
useCORS: صحيح ،
onrendered: وظيفة (قماش)
{
img = canvas.toDataURL ("صورة / jpg") ؛

                                                  console.log(img.length);
                                                  console.log(img);

                                                  var imgComp = $c(conponentName);
                                                  imgComp.img.src = img

                                          }
                      }
                );

}

الهدف الرئيسي هو التقاط مسار خرائط Google بعد إنشائه ، ولكن كما أقول ، في بعض الأحيان ، لا يعمل في بعض الأحيان. أي دليل على ما يحدث؟

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

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

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

$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
      "transform":"none",
      "left":mapleft,
      "top":maptop,
    })

هل هناك طريقة "لاستعادة" ما يفعله هذا الخط؟ في الوقت الحالي ، أستدعي دالة initMap مرة أخرى لكي تعمل الخريطة بعد استدعاء دالة html2canvas مع كود التحويل.

هل يعمل البرنامج النصي أعلاه مع الإصدار 3 من خرائط Google؟

مطلبي هو التقاط لقطة شاشة لخريطة Google الإصدار 3 مع مسار مرسوم عليها.

إنه يعمل بشكل جيد في Firefox ، لكن في Chrome لا يوجد علامة أو مسار. أنا أستخدم بالفعل علامات مخصصة.

لدي صعوبة في تصحيح الأخطاء لأنه لا يوجد خطأ في وحدة التحكم والتسجيل محدود للغاية.

هل قام أي شخص بحل المشكلة في Chrome؟ لقد جربت نصوص البروكسي بلغتين ، لكن لا يبدو أن أيًا منهما يحدث فرقًا.

لدي مشكلة مماثلة ، قمت بنسخ / قص هذا الرمز من الإنترنت:

  if($.browser.safari) {// Fix for Chrome
    var transform=$(".gm-style>div:first>div").css("transform");
    var comp=transform.split(","); //split up the transform matrix
    var mapleft=parseFloat(comp[4]); //get left value
    var maptop=parseFloat(comp[5]);  //get top value
    $(".gm-style>div:first>div").css({ //get the map container. not sure if stable
      "transform":"none",
      "left":mapleft,
      "top":maptop,
    });
  }

  html2canvas([$("#map")[0]], {
    logging: false,
    useCORS: true,
    onrendered: function (canvas) {
      $('#screenshot').after(canvas);

      if($.browser.safari) {// Fix for Chrome
        $(".gm-style>div:first>div").css({
          left:0,
          top:0,
          "transform":transform
        });
      }
    }
  });

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

اي فكرة ؟

مثبت !

لم يتم تشغيل الإصلاح الخاص بالكروم الذي قمت بنسخه / لصقه بغباء.

انا فعلت هذا :

  if(window.chrome) {// Fix for Chrome
    var transform=$(".gm-style>div:first>div").css("transform");
    var comp=transform.split(","); //split up the transform matrix
    var mapleft=parseFloat(comp[4]); //get left value
    var maptop=parseFloat(comp[5]);  //get top value
    $(".gm-style>div:first>div").css({ //get the map container. not sure if stable
      "transform":"none",
      "left":mapleft,
      "top":maptop,
    });
  }

  html2canvas([$("#map > div.g-map-canvas > div > div > div:nth-child(1)")[0]], {
    logging: false,
    useCORS: true,
    onrendered: function (canvas) {
      $('#screenshot').after(canvas);

      if(window.chrome) {// Fix for Chrome
        $(".gm-style>div:first>div").css({
          left:0,
          top:0,
          "transform":transform
        });
      }
    }
  });

المحدد الطويل جدًا في html2canvas هو الحصول على خريطة بدون أزرار وخيارات.

انا اعمل الان شكرا

شكرًا GCorbel إنه يعمل جيدًا مع الحل الخاص بك.

تعمل الحلول أعلاه على عرض الخريطة ولكن عناصر التحكم العلوية إما مفقودة أو في موضع خاطئ. أيه أفكار؟

هل ما زالت هذه مشكلة في الإصدار 1.0.0 ؟ إذا كان الأمر كذلك ، هل يمكنك مشاركة مثال على jsfiddle .

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

niklasvh @ يمكنني أن أؤكد أنها لا تزال مشكلة في أحدث إصدار. هذا كمان قمت بإنشائه أثناء اختبار هذه المشكلة: http://jsfiddle.net/9agom947/4/

يُظهر الكمان المشكلة كما هو موضح في سؤال stackoverflow المرتبط ، وليس بالضرورة ما هو موجود في OP الخاص بهذا الموضوع. إذا لم تقم بتحريك الخريطة ، فلا توجد مشكلة في نسخ الخريطة. بمجرد تحريك الخريطة ، في Chrome وليس في FireFox ، ستكون الخريطة المنسوخة فارغة خارج المنطقة التي تم تحميلها في البداية.

يبدو أن الإصلاح الوارد في هذا الموضوع يحل المشكلة.

@ Ananda-Pryana لقد جربت jsFiddle ولكن الإصلاح لا يبدو أنه يعمل بعد الآن. هل يوجد حل آخر؟

شكرا لك مقدما.

يبدو أن أحدث إصدار من خرائط Google (v3.32) الذي تم إصداره مؤخرًا به عارض تجريبي جديد.
https://developers.google.com/maps/documentation/javascript/releases

هذا كسر الإصلاح. لقد أجريت اختبارًا سريعًا فقط ، ولكن يبدو الآن أن الأشياء معطلة بشكل متساوٍ في جميع المتصفحات (ليس فقط لمتصفح Chrome) ، لذلك نأمل أن يسهل ذلك الإصلاح في الإصدار التالي من html2canvas؟

ولكن الحل السريع هو استخدام الإصدار الأقدم من gmap ، حيث لا يزال الإصلاح يعمل بشكل جيد.

@ Ananda-Pryana Yup لقد خفضت مستوى gmap ، عملت ، شكرًا.

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

يبدو أنه في الإصدار الجديد من خرائط Google يتم تطبيق التحويل على div. يبدو أن استخدام حل (".gm-style> div: first> div: first> div: last> div") يعمل. على الرغم من أنني لم أختبره جيدًا بعد.

عملت نصيحة rSensation مثل السحر في الإصدار الأحدث. شكرا لك!

حسنًا ، يبدو أن هذه المشكلة عادت بالنسبة لي ، ولا بد لي من تحريك الخريطة لرؤية المشكلة وعندما أقوم بالتحريك واستخدام Html2Canvas للحصول على لقطة الشاشة ، تظهر بعض المناطق باللون الرمادي الفارغ؟

لأي منكم يتعامل مع قطع طبقات التراكب -
يقوم محدد $('.gm-style>div:first>div:first>div:first>div:first>div') أحد تراكبات div الخاصة بي وتطبيق نفس التحويل على css.

mylesboone كيف وجدت div طبقات التراكب؟ أنا أعاني حاليًا من نفس المشكلة المتمثلة في قطع طبقات التراكب.

أنا أستخدم GmapMarker و GmapPolyline كطبقات تراكب في الوقت الحالي.

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

أفضل حل وجدته:

    html2canvas($('.gm-style>div:eq(0)')[0],{
        useCORS: true,
        allowTaint: true,
        async:false,
    }).then(canvas => {document.body.appendChild(canvas)});

    html2canvas($('.gm-style>div:eq(0)')[0],{
        useCORS: true,
        allowTaint: true,
        async:false,
    }).then(canvas => {document.body.appendChild(canvas)});

هذا أعطني قماش غير معرّف .. هل يجب على محدد العناصر كلمة خارج الصندوق؟

hseeda شكرا لك! المحدد الخاص بك كان يفعل الحيلة بالنسبة لي!

ها هو المحدد الذي تم تعديله قليلاً والذي يعمل (على الأقل بالنسبة لي ، هههه)

const div = document.querySelector('#map > div:first-of-type')

html2canvas(div, {})

ومع ذلك ، فقد تم الآن قطع شعار Google الذي يجب أن يظهر دائمًا من أجل الامتثال للشروط والأحكام:

حسنًا ، سأقوم فقط باستنساخ العقدة أو شيء من هذا القبيل. لقد كنت أحارب هذه الخريطة منذ فترة الآن: د

هذا يناسبني:

$('#snapshot').on('click',function () {
    html2canvas(document.querySelector('.gm-style'), 
           {useCORS:true, allowTaint: true,async:false} ).then(canvas => {
            document.body.appendChild(canvas)
    });
});

كانت مشكلة الخريطة الفارغة أو الخطأ في إنشاء اللوحة أمرًا صعبًا ، ولكن ما تم إصلاحه بالنسبة لي في النهاية هو إضافة هذا التكوين:

ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
      }

html2canvas(mapWrapper, {
      useCORS: true,
      allowTaint: false,
      ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
      }
    }).then(canvas => {
      const url = canvas.toDataURL('image/png');
      saveAs(url, 'image3.png');
      window.URL.revokeObjectURL(url);
    });

بفضل imlinus و @ hseeda ! هذا المحدد يعمل بشكل مثالي بالنسبة لي! كما أنه يحتفظ بشعار google ، شكرًا!

hseeda شكرا لك! المحدد الخاص بك كان يفعل الحيلة بالنسبة لي!

ها هو المحدد الذي تم تعديله قليلاً والذي يعمل (على الأقل بالنسبة لي ، هههه)

const div = document.querySelector('#map > div:first-of-type')

html2canvas(div, {})

ومع ذلك ، فقد تم الآن قطع شعار Google الذي يجب أن يظهر دائمًا من أجل الامتثال للشروط والأحكام:

حسنًا ، سأقوم فقط باستنساخ العقدة أو شيء من هذا القبيل. لقد كنت أحارب هذه الخريطة منذ فترة الآن: د