مشكلة ذات أصل متقاطع في Canvas toDataURL()

على الرغم من ضمان الراحة الكافية، قد يواجه المستخدمون استثناءات أمنية عند استخدام Canvas.toDataURL() . خذ بعين الاعتبار الكود التالي:

var frame = document.getElementById("viewer");
frame.width = 100;
frame.height = 100;

var ctx = frame.getContext("2d");
var img = new Image();
img.src = "http://www.ansearch.com/images/interface/item/small/image.png"

img.onload = function() {
    // Draw image
    ctx.drawImage(img, 0, 0)

    // Security exception occurs here:
    window.open(frame.toDataURL("image/png"));
}

يحاول هذا الرمز فتح صورة من خادم مختلف كبيانات base64 في نافذة جديدة، لكنه يثير استثناء SECURITY_ERR.

وفقًا للمواصفات، فإن طريقة toDataURL()‎ يلقي عنصر اللوحة استثناء SECURITY_ERR إذا تم تعيين علامة الأصل النظيف الخاصة به على خطأ. عندما يتم تحميل صورة من خادم مختلف، تصبح اللوحة ملوثة ويتم تعيين علامة الأصل النظيف الخاصة بها على خطأ.

لذلك، ليس من الممكن استخدام toDataURL() مباشرة للحصول على بيانات base64 للصور التي تم الحصول عليها من خوادم مختلفة. قد تكون التقنيات البديلة، مثل CORS أو الوكلاء، ضرورية للتعامل مع الصور ذات الأصل المشترك.