Html2canvas: لا يتم عرض الصور عبر النطاقات (بدون CORS أو وكيل)

تم إنشاؤها على ٢١ مايو ٢٠١٥ · 23تعليقات · مصدر: niklasvh/html2canvas

أهلا،

لا يؤدي استخدام صور التعليمات البرمجية التالية إلى عرض نطاق مشترك.

html2canvas($(".canvas-surround"), {
        logging: true,
        width: 1920 * getScale(),
        height: 1080 * getScale(),
        useCORS: false,
        onrendered: function(canvas) {

            var bottomCtx = canvas.getContext("2d");
            var topCtx = canvas.getContext("2d");
            var bData = bottomCtx.getImageData(0, 0, canvas.width, canvas.height);
            var tData = topCtx.getImageData(0, 0, canvas.width, canvas.height);

            var merged = mergeData(bData, tData);

            bottomCtx.putImageData(merged, 0, 0);

            var newImg = canvas.toDataURL("image/png");
            console.log(newImg);
            var blob = b64toBlob(newImg, "image/png");
            console.log(blob);

            var blobUrl = URL.createObjectURL(blob);

            console.log(blobUrl);

            downloadURI(blobUrl);
        }
    });

أثناء محاولة الحصول على صور من " http://www.thermmark.co.uk " من " http://www.playgroundmarkingsdirect.co.uk " ، لن يتم عرض الصور.

عندما نقلت الشفرة إلى موقع ويب " http://www.thermmark.co.uk " ، تم عرض الصور (أمتلك كلا النطاقين)

أيه أفكار؟

Needs More Information

مصدر

Mallander

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

ربما يجب عليك استخدام useCORS ptoperty على أنه صحيح ، فهو مخصص لمحتوى الويب عبر النطاقات

akaJes في ٢١ مايو ٢٠١٥

👍6 😄1 👎1

ال 23 كومينتر

ربما يجب عليك استخدام useCORS ptoperty على أنه صحيح ، فهو مخصص لمحتوى الويب عبر النطاقات

akaJes في ٢١ مايو ٢٠١٥

👍6 😄1 👎1

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

Mallander في ٢١ مايو ٢٠١٥

هل حاولت الإصلاح الخاص بي؟ https://github.com/niklasvh/html2canvas/pull/554

Cristy94 في ٢٧ مايو ٢٠١٥

ربما يجب تعيين allowTaint على القيمة true ، ولكن بعد ذلك لا يمكنك تصدير النتيجة المعروضة.

oddui في ٢٥ يونيو ٢٠١٥

لا أفهم لماذا لا تستخدم userCORS أو proxy ... لقد تم إنشاؤها للتو لمثل هذه المشاكل.

brcontainer في ٢٢ يوليو ٢٠١٥

brcontainer نظرًا لأنها لا تعمل في أحدث إصدار ، راجع الإصلاح الخاص بي: https://github.com/niklasvh/html2canvas/pull/554

Cristy94 في ٢٢ يوليو ٢٠١٥

تضمين التغريدة إصلاح رائع! شكرا!

brcontainer في ٢٣ يوليو ٢٠١٥

مرحبًا @ Cristy94 ،

أقوم بإحضار الصور من CMS (Contentful) في HTML الخاص بي ثم أحاول إنشاء ملف PDF من HTML هذا.
لكن في ملف PDF الذي تم إنشاؤه ، الصور مفقودة (يبدو أنها مشكلة تتعلق بالأصل المتقاطع).
من فضلك اقترح لي كيف يمكنني التخلص من هذه القضايا.
أدناه هو الكود الخاص بي-:

وظيفة downloadPDF () {
var canvasToImage = الوظيفة (قماش) {
var img = صورة جديدة () ؛
var dataURL = canvas.toDataURL ('image / png') ؛
img.crossOrigin = "مجهول" ؛
img.src = dataURL ؛
عودة img؛
} ؛

var canvasShiftImage = function (oldCanvas، shiftAmt) {
shiftAmt = parseInt (shiftAmt) || 0 ؛
if (! shiftAmt) {return oldCanvas؛ }

var newCanvas = document.createElement ('canvas') ؛
newCanvas.height = oldCanvas.height - shiftAmt ؛
newCanvas.width = oldCanvas.width ؛
var ctx = newCanvas.getContext ('2d') ،
ctx.mozImageSmoothingEnabled = خطأ ،
ctx.webkitImageSmoothingEnabled = خطأ ،
ctx.msImageSmoothingEnabled = خطأ ،
ctx.imageSmoothingEnabled = خطأ ،

var img = canvasToImage (oldCanvas) ،
ctx.drawImage (img، 0، shiftAmt، img.width، img.height، 0، 0، img.width، img.height) ؛

عودة قماش جديد
} ؛

var canvasToImageSuccess = وظيفة (قماش) {
var pdf = jsPDF جديد ('l'، 'px')،
pdf الداخلية = pdf.internal،
pdfPageSize = pdfInternals.pageSize ،
pdfScaleFactor = pdfInternals.scaleFactor ،
pdfPageWidth = pdfPageSize.width ،
pdfPageHeight = pdfPageSize.height،
totalPdfHeight = 0 ،
htmlPageHeight = canvas.height ،
htmlScaleFactor = canvas.width / (pdfPageWidth * pdfScaleFactor) ،
SafetyNet = 0 ؛

while (totalPdfHeight <htmlPageHeight && safetyNet <15) {
var newCanvas = canvasShiftImage (canvas، totalPdfHeight) ،
pdf.addImage (newCanvas، 'png'، 0، 0، pdfPageWidth، 0، null، 'NONE') ؛
// var alias = Math.random (). toString (35) ؛
// pdf.addImage (newCanvas، 0، 0، pdfPageWidth، 0، 'png'، alias، 'NONE') ؛

totalPdfHeight + = (pdfPageHeight * pdfScaleFactor * htmlScaleFactor) ؛

إذا (totalPdfHeight <htmlPageHeight) {
pdf.addPage () ؛
}
SafetyNet ++ ؛
}

var pageName = document.location.pathname.match (/ [^ /] + $ /) [0] ؛
pdf.save (pageName + '.pdf') ؛
} ؛

html2canvas ($ ('body') [0]،
{
onrendered: الوظيفة (قماش) {
canvasToImageSuccess (قماش) ؛
}
}) ؛
}

gauravmishra24 في ٢٨ ديسمبر ٢٠١٦

😕1 👍1

مهلا ، هل سيكون هناك حل لذلك؟ لم يتم عرض صور CORS هنا أيضًا :(

Rookev في ١٧ مارس ٢٠١٧

مرحبا روكيف ،

يمكنك القيام بذلك عن طريق تمرير أحد الخيارات في دالة html2canvas. وثق بي هذا سيعمل بالتأكيد :)

html2canvas ($ ('# div_pdf') [0]،
{
useCORS: صحيح ، // بتمرير هذا الخيار في الوظيفة ، سيتم عرض الصور ذات الأصل المتقاطع بشكل صحيح في الإصدار الذي تم تنزيله من ملف PDF
onrendered: الوظيفة (قماش) {
canvasToImageSuccess (قماش) ؛
}
}) ؛
لمزيد من المعلومات ، يمكنك إلقاء نظرة على وثائق مكتبة html2canvas على عنوان URL أدناه-:
https://html2canvas.hertzen.com/documentation.html

gauravmishra24 في ١٧ مارس ٢٠١٧

😕5 👍4

مرحبًا @ gauravmishra24 ، للأسف هذا لا يعمل. المشكلة هي أنني أريد تضمين الصور من الخادم حيث يكون الخادم لديه العلم

Access-Control-Allow-Origin: *

غير محدد

Rookev في ١٧ مارس ٢٠١٧

👍4

مرحبا روكيف ،

هل يمكنك نشر مقتطف الشفرة من فضلك؟

حتى أتمكن من إلقاء نظرة أفضل على نفس ...

gauravmishra24 في ٢٠ مارس ٢٠١٧

أهلا،

هل هناك أي حل لهذا؟ حتى مع ضبط useCORS على true ، لا يتم تنزيل الصور. لا يزال بإمكانك الحصول على خطأ عبر الأصل كما هو مذكور أعلاه.

أيضًا ، لست متأكدًا من حل Cristy94 في ملف html2Canvas.js الموزع. حتى بعد تغيير الكود في الملف الموزع ، وفقًا لـ https://github.com/niklasvh/html2canvas/pull/554/commits/87d44359be73075ba4d5f36d6e1c8b88b7444402 فإنه لا يعمل أيضًا.

بالنسبة للبديل الآخر ، مع إعدادات الوكيل ، هل هناك أي حل لتطبيق angular 2؟
قائمة الموقع الحالي (https://github.com/niklasvh/html2canvas/wiki/Proxies) لا تحتوي عليها!

braino15 في ١٦ مايو ٢٠١٧

👍1

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

niklasvh في ١٢ ديسمبر ٢٠١٧

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

no-response[bot] في ١٢ ديسمبر ٢٠١٧

👎2

niklasvh هذا هو المثال الخاص بي على codepen مع v1.0.0:
https://codepen.io/Onlylonger/pen/ppjPKX
نفس الأمر. شكرا لك

Onlylonger في ١٦ ديسمبر ٢٠١٧

هل هناك أي مكون إضافي آخر يعرفه أي شخص. هذا لم يكن يعمل مع طلب خوادم مختلفة. لا يوجد مثال مناسب للوكيل.

vinayistar في ١١ يونيو ٢٠١٨

vinayistar ، يمكنك تجربة تغييراتي ، انظر الرابط https://github.com/niklasvh/html2canvas/issues/1544#issuecomment -435640901

CrandellWS في ٤ نوفمبر ٢٠١٨

باستخدام useCORS وقم بتعيين سمة img crossOrigin:anonymous

iHadDream في ١٧ يوليو ٢٠١٩

👍4

{ useCORS: false, allowTaint: true } هذا يعمل بالنسبة لي

DanyRupes في ١٥ أكتوبر ٢٠٢٠

الحل الخاص بي لهذه المشكلة هو تحويل صورة src إلى Base64

const img = document.querySelector('#img')
fetch(img.src)
  .then(res => res.blob())
  .then(blob => new Promise((resolve, reject) => {
      const reader = new FileReader;
      reader.onerror = reject;
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.readAsDataURL(blob);
    })
  )
  .then(dataURL => {
    img.src = dataURL
    return html2canvas(element)
  } )

todoi في ١٥ نوفمبر ٢٠٢٠

todoi هل يمكنك تقديم عينة من هذا مع jspdf.

nishanta454 في ٢٩ نوفمبر ٢٠٢٠

@ nishanta454
هذا هو المثال الذي كتبته. html2canvas تصيير صور الأصل المتقاطع .
في هذا المثال ، أستخدم cors-anywhere لإضافة رؤوس CORS إلى طلب صورة الوكيل.

أول شيء نحتاجه هو خادم تم تكوينه لاستضافة الصور باستخدام رأس Access-Control-Allow-Origin الذي تم تكوينه للسماح بالوصول عبر الأصل إلى ملفات الصور.
من CORS_enabled_image

todoi في ٢ ديسمبر ٢٠٢٠

هل كانت هذه الصفحة مفيدة؟

0 / 5 - 0 التقييمات