কেন ক্যানভাস.টোডাটা ইউআরএল () সুরক্ষা ব্যতিক্রম ছুঁড়ে ফেলে?

Question 1

আমি কি পর্যাপ্ত ঘুম পেয়েছি না কি? এই নিম্নলিখিত কোড

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)

    // Here's where the error happens:
    window.open(frame.toDataURL("image/png"));
}

এই ত্রুটি নিক্ষেপ করছে:

SECURITY_ERR: DOM Exception 18

এটি কাজ করার কোন উপায় নেই! দয়া করে কেউ কি এটি ব্যাখ্যা করতে পারেন?

Question 2

ইন চশমা এটা বলেছেন:

যখনই কোনও ক্যানভাস উপাদানের টোডাআরএলআউট () পদ্ধতিটি বলা হয়েছে যার মূল-পরিষ্কার পতাকাটি মিথ্যাতে সেট করা হয়, তখন পদ্ধতিটিকে অবশ্যই একটি SECURITY_ERR ব্যতিক্রম বাড়াতে হবে।

যদি চিত্রটি অন্য সার্ভার থেকে আসে তবে আমি মনে করি না আপনি ডেটা ইউআরএল () ব্যবহার করতে পারবেন

Question 3

চিত্রের অবজেক্টগুলিতে ক্রস অরিজিন অ্যাট্রিবিউট সেট করা আমার পক্ষে কাজ করেছিল (আমি ফ্যাব্রিক ব্যবহার করছিলাম)

    var c = document.createElement("img");
    c.onload=function(){
        // add the image to canvas or whatnot
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src='http://google.com/cat.png';

যারা ফ্যাব্রিক ব্যবহার করছেন তাদের জন্য, এখানে চিত্র.প্রেমআরএল কীভাবে প্যাচ করবেন

// patch fabric for cross domain image jazz
fabric.Image.fromURL=function(d,f,e){
    var c=fabric.document.createElement("img");
    c.onload=function(){
        if(f){f(new fabric.Image(c,e))}
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src=d;
};

Question 4

যদি চিত্রটি কোনও হোস্টে হোস্ট করা থাকে যা অ্যাক্সেস-নিয়ন্ত্রণ-অনুমতি-উত্স বা অ্যাক্সেস-নিয়ন্ত্রণ-অনুমতি দিন - শংসাপত্রগুলির মধ্যে দুটি সেট করে, আপনি ক্রস অরিজিন রিসোর্স শেয়ারিং (সিওআরএস) ব্যবহার করতে পারেন। আরও তথ্যের জন্য এখানে (ক্রসরিগিন বৈশিষ্ট্য) দেখুন।

আপনার অন্যান্য বিকল্পটি আপনার সার্ভারের জন্য একটি এন্ডপয়েন্ট রয়েছে যা একটি চিত্র আনবে এবং পরিবেশন করবে। (যেমন। http: //? your_host / শেষবিন্দু URL = URL টি ) যে পদ্ধতির লেটেন্সি হচ্ছে downside হয় এবং তাত্ত্বিক অপ্রয়োজনীয় আনা হচ্ছে।

যদি আরও বিকল্প সমাধান থাকে তবে আমি সেগুলি সম্পর্কে আগ্রহী হব।

Question 5

মনে হচ্ছে এটি প্রতিরোধের একটি উপায় আছে যদি চিত্রের হোস্টিং চিত্রের সংস্থান এবং ব্রাউজারের জন্য নিম্নলিখিত HTTP শিরোনামগুলি সরবরাহ করতে সক্ষম হয় CORS সমর্থন করে:

অ্যাক্সেস-নিয়ন্ত্রণ-অনুমতি-উত্স: *
অ্যাক্সেস-নিয়ন্ত্রণ-অনুমতি-শংসাপত্রসমূহ: সত্য

এটি এখানে বলা হয়েছে: http://www.w3.org/TR/cors/#use-cases

Question 6

অবশেষে আমি সমাধানটি খুঁজে পেলাম। শুধু যোগ দরকার crossOriginতৃতীয় PARAM যেমন fromURLfunc

fabric.Image.fromURL(imageUrl, function (image) {
            //your logic
    }, { crossOrigin: "Anonymous" });

Question 7

আমার একই সমস্যা ছিল এবং সমস্ত চিত্র একই ডোমেনে হোস্ট করা হয় ... সুতরাং, যদি কারও একই সমস্যা হয় তবে আমি কীভাবে সমাধান করেছি তা এখানে:

আমার দুটি বোতাম ছিল: একটি ক্যানভাস উত্পন্ন করার জন্য এবং অন্যটি ক্যানভাস থেকে চিত্র উত্পন্ন করার জন্য। এটি কেবল আমার পক্ষে কাজ করেছিল, এবং দুঃখিত যে আমি কেন জানি না, যখন আমি প্রথম কোডটিতে সমস্ত কোড লিখেছিলাম। সুতরাং আমি যখন এটি ক্লিক করি এটি একই সাথে ক্যানভাস এবং চিত্র উত্পন্ন করে ...

কোডগুলি যখন বিভিন্ন ফাংশনে ছিল তখন আমার সবসময় এই সুরক্ষা সমস্যা থাকে ... = /

Question 8

আমি এটি ব্যবহার করে এটি কাজ করতে সক্ষম হয়েছি:

.htaccessআপনার উত্স সার্ভারে আপনার প্রথম লাইনে এটি লিখুন

Header add Access-Control-Allow-Origin "*"

তারপরে কোনও <img>উপাদান তৈরি করার সময় , এটি নিম্নলিখিত হিসাবে করুন:

// jQuery
var img = $('<img src="http://your_server/img.png" crossOrigin="anonymous">')[0]

// or pure
var img = document.createElement('img');
img.src='http://your_server/img.png';
img.setAttribute('crossOrigin','anonymous');

Question 9

আপনি আপনার আইডিতে স্পেস রাখতে পারবেন না

হালনাগাদ

আমার ধারণা হ'ল চিত্রটি যেখানে আপনি স্ক্রিপ্টটি চালাচ্ছেন তার চেয়ে আলাদা সার্ভারে রয়েছে। আপনার নিজের পৃষ্ঠায় এটি চালানোর সময় আমি আপনার ত্রুটিটির সদৃশ করতে সক্ষম হয়েছি, তবে একই ডোমেনে হোস্ট করা একটি চিত্র ব্যবহার করার মুহুর্তে এটি কার্যকর হয়েছে। সুতরাং এটি সুরক্ষা সম্পর্কিত - আপনার সাইটে ছবিটি রাখুন। কেহ কেন জানেন কেন এই ঘটনা?

Question 10

আপনি যদি কেবল কোনও ক্যানভাসে কিছু চিত্র আঁকেন তবে নিশ্চিত হন যে আপনি একই ডোমেন থেকে চিত্রগুলি লোড করছেন।

www.example.com করার ভিন্ন example.com

সুতরাং আপনার ঠিকানা বারে থাকা আপনার চিত্র এবং url একই, www বা না তা নিশ্চিত করুন।

Question 11

আমি ফ্যাব্রিক.জেএস ব্যবহার করছি এবং টুডাআরএল ইউএল-এর পরিবর্তে ট্যাটলেসজেএসএন ব্যবহার করে এটি সমাধান করতে পারছি:

canvas.toDatalessJSON({ format: 'jpeg' }).objects[0].src

সম্পাদনা: কিছু নয়। উপরের অঙ্কন ছাড়াই কেবল পটভূমি চিত্রটি জেপিজিতে রফতানির ফলস্বরূপ এটি সর্বোপরি কার্যকর ছিল না।