কলঙ্কযুক্ত ক্যানভ্যাসগুলি রফতানি করা যাবে না

Question

আমি আমার ক্যানভাস একটি ইমগিতে সংরক্ষণ করতে চাই। আমি এই ফাংশন আছে:

function save() {
    document.getElementById("canvasimg").style.border = "2px solid";
    var dataURL = canvas.toDataURL();
    document.getElementById("canvasimg").src = dataURL;
    document.getElementById("canvasimg").style.display = "inline";
}

এটি আমার ত্রুটি দেয়:

আনকডেড সিকিউরিটি এরিয়ার: 'এইচটিএমএল ক্যানভাস এলিমেন্ট'-এ' টুডাআরএলআউট 'কার্যকর করতে ব্যর্থ: কলঙ্কিত ক্যানভ্যাসগুলি রফতানি করা যাবে না।

আমার কি করা উচিৎ?

Comments

কি ব্রাউজারে? stackoverflow.com/a/21362569/476716 দাবি এটি একটি বাগ।

— অরেঞ্জডোগ

ক্রোম এবং ফায়ারফক্সে

— ব্যবহারকারী 3465096

Answer 1

সুরক্ষার কারণে, আপনার স্থানীয় ড্রাইভটিকে "অন্যান্য-ডোমেন" হিসাবে ঘোষণা করা হয়েছে এবং ক্যানভাসকে কলঙ্কিত করবে।

(এটি কারণ আপনার সর্বাধিক সংবেদনশীল তথ্য সম্ভবত আপনার স্থানীয় ড্রাইভে রয়েছে!)।

পরীক্ষার সময় এই workarounds চেষ্টা করুন:

• সমস্ত পৃষ্ঠা সম্পর্কিত ফাইল (.html, .jpg, .js, .css, ইত্যাদি) আপনার ডেস্কটপে রাখুন (সাব-ফোল্ডারে নয়)।

• আপনার ছবিগুলি এমন কোনও সাইটে পোস্ট করুন যা ক্রস-ডোমেন ভাগ করে নেওয়ার সমর্থন করে (যেমন ড্রপবক্স.কম)। নিশ্চিত হয়ে নিন যে আপনি নিজের ছবিগুলি ড্রপবক্সের সর্বজনীন ফোল্ডারে রেখেছেন এবং চিত্রটি ডাউনলোড করার সময় ক্রস অরিজিন পতাকাটিও সেট করেছেন (var img = new image (); img.crossOrigin = "বেনামে"))

• আপনার বিকাশ কম্পিউটারে একটি ওয়েবসভার ইনস্টল করুন (আইআইএস এবং পিএইচপি ওয়েব সার্ভারগুলির উভয়ই বিনামূল্যে সংস্করণ রয়েছে যা স্থানীয় কম্পিউটারে দুর্দান্তভাবে কাজ করে)।

Comments

ধন্যবাদ, img.crossOrigin সম্পত্তি সেট করা আমাকে সহায়তা করেছে!

— zumek

@মার্কই - আমি ফাইল বা কোনও ইউআরএল থেকে লোড না করে লোকালস্টোরেজ থেকে চিত্রের ডেটা লোড করেছি, তারপরে এতে কিছু হেরফের হয়েছে যাতে পাঠ্য যুক্ত করার মতো হয়। তারপরে ডেটা ইউআরএল () ব্যবহার করে স্থানীয় স্টোরেজে এটিকে ফিরিয়ে দেওয়ার চেষ্টা করলেন। তবে এটি "এইচটিএমএলক্যানভাসিলিমেটনে 'টুডাআরএলআরএল' কার্যকর করতে ব্যর্থ হয়েছে: কলঙ্কিত ক্যানভ্যাসগুলি রফতানি করা যায় না" shows এই ক্ষেত্রে আমি ক্রস ডোমেন ইস্যু পেতে কোনও এক্সট্রেনল ফাইল বা url ব্যবহার করছি না। তাহলে কেন এটি এই ত্রুটির ফলস্বরূপ?

— সাজিথ

@ সাইজথ - আপনি চিত্রগুলির জন্য ব্যবহৃত পথটি যাচাই করতে চাইতে পারেন। আমার এই সমস্যাটিও ছিল কারণ আমি আমার স্থানীয় ভার্চুয়াল সার্ভারের আইপি (127.0.xx /) এর মাধ্যমে সরাসরি অ্যাক্সেসের পরীক্ষা করছিলাম তবে কিছু চিত্রের ডোমেন (লোকালহোস্ট /) এর মাধ্যমে সংযুক্ত ছিল। একবার আমি এর পরিবর্তে লোকালহোস্ট ব্যবহার করলাম। সুতরাং নিশ্চিত হয়ে নিন যে আপনি এরকম কোনও কিছুর দিকে দৌড়াচ্ছেন না।

— ভিক্টর ডি

(1) এটিকে সিএমপি / লোকালডিস্ক / ফাইলের পরিবর্তে এক্সএ্যাম্প্প ওয়েবসার্ভার, লোকালহোস্ট / ফাইল থেকে দেখুন; তাহলে ক্রোম সুরক্ষা ত্রুটি সম্পর্কে অভিযোগ করবে না। (২) বা ক্রোম শুরু করার সময় এই পতাকাটি ব্যবহার করুন: - ফাইল-অ্যাক্সেস-থেকে-ফাইলগুলি

— ছাড়ুন

কেবলমাত্র আরেকটি সম্ভাব্য সমস্যা যুক্ত করা: আপনি যদি কোনও ক্যানভাস রফতানি করার চেষ্টা করছেন যা একটি বিদেশী অবজেক্টের সাথে একটি এসভিজি রয়েছে, কিছু ব্রাউজার এটিকে কলঙ্কিত হিসাবে চিহ্নিত করবে।

— হায়রিফোটার

Answer 2

আইএমজি ট্যাগে অজ্ঞাতনামাতে ক্রসরিগিন সেট করুন।

<img crossorigin="anonymous"></img>

Comments

তবে এইচটিএমএল 5 ক্যানভাসের ক্ষেত্রে কি করা উচিত, img উপাদানগুলি নয়

— গ্রাফিক্স

ক্যানভাস উপাদানটির ক্ষেত্রে, সমস্যার উত্সটি সর্বদা কিছু চিত্র (বা চিত্র) এর সাথে থাকে যা আপনি এটি আঁকেন। সুতরাং আপনাকে কেবল চিত্রটি ট্র্যাক করতে হবে এবং এটি লোড করার আগে তার ক্রসআরগিন বৈশিষ্ট্যটি নির্দেশিত হিসাবে সেট করতে হবে।

— ফার্নান্দো ইশেভারিয়া

এই আমার দিন বাঁচা!

— চ্যাং

সহায়তায় খুশি :)

— আননিয়া মার্টিনেজ

অফিসে তার সকাল

— পাই

Answer 3

যদি কেউ আমার উত্তরটি দেখে, আপনি সম্ভবত এই পরিস্থিতিতে:

1. ওপেনলেয়ারগুলি (সংস্করণ> = 3) ব্যবহার করে ক্যানভাসে একটি মানচিত্রের স্ক্রিনশট পাওয়ার চেষ্টা করছেন
2. এবং মানচিত্র রফতানির উদাহরণ দেখেছেন map
. মানচিত্রের স্তরটি রেন্ডার করতে ওল.সোর্স.এক্সওয়াইজ ব্যবহার করুন

বিঙ্গো!

আপনার বিভ্রান্তি সমাধানের জন্য ol.source.XYZ.crossOrigin = 'বেনামে' ব্যবহার করা । অথবা নিম্নলিখিত কোড পছন্দ করুন:

     var baseLayer = new ol.layer.Tile({
         name: 'basic',
         source: new ol.source.XYZ({
             url: options.baseMap.basic,
             crossOrigin: "Anonymous"
         })
     });

Comments

কল্পনাপ্রসূত। টাইলআইমেজ এবং এর মতো সমস্ত উত্সের জন্য দরকারী।

— ফিল

Fatastic! ঠিক আমি নিজের জন্য যা খুঁজছিলাম, একটি ওপেনলায়ারস ডেমো ইমের জন্য সহজ সমাধান।

— মার্চ

আমি ভেক্টর টাইল স্তর ব্যবহার করছি এবং উত্সটিতে এই যথাযথ যোগ করার পরেও এটি খুব কার্যকর নয়!

— mahdi n75

ঠিক আমার যা প্রয়োজন তা :)

— রে

Answer 4

আপনি যদি ctx.drawImage()ফাংশন ব্যবহার করে থাকেন তবে আপনি নিম্নলিখিতগুলি করতে পারেন:

var img = loadImage('../yourimage.png', callback);

function loadImage(src, callback) {
    var img = new Image();

    img.onload = callback;
    img.setAttribute('crossorigin', 'anonymous'); // works for me

    img.src = src;

    return img;
}

এবং আপনার কলব্যাকে আপনি এখন ctx.drawImageএটি ব্যবহার করে রফতানি করতে পারবেনtoDataURL

Comments

এটি আমার পক্ষে কার্যকর হয়নি। তবুও Tainted canvases may not be exported.ত্রুটির বার্তা পাচ্ছে ।

— স্যাম সোভেরকো

এটা আমার জন্য কাজ করে. ধন্যবাদ। @SamSverko নিশ্চিত করুন যে img.src এর আগে বৈশিষ্ট্যটি সেট করে।

— আইজোগজা

Answer 5

আমার ক্ষেত্রে আমি একটি ভিডিও থেকে ক্যানভাস ট্যাগ এ আঁকছি। কলঙ্কিত ক্যানভাস ত্রুটির সমাধানের জন্য আমাকে দুটি জিনিস করতে হয়েছিল:

<video id="video_source" crossorigin="anonymous">
    <source src="http://crossdomain.example.com/myfile.mp4">
</video>

• অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-অরিজিন শিরোনামটি ভিডিও উত্স প্রতিক্রিয়াতে সেট করা নিশ্চিত করুন (ক্রসডোমেন.এক্সামেল.কমের সঠিক সেটআপ)
• ক্রসরিগিন = "বেনামে" রাখতে ভিডিও ট্যাগটি সেট করুন

Answer 6

দেখে মনে হচ্ছে আপনি কোনও ইউআরএল থেকে এমন কোনও চিত্র ব্যবহার করছেন যা সঠিক অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-উত্স শিরোনামটি সেট করে নি এবং তাই সমস্যাটি .. আপনি এই চিত্রটি আপনার সার্ভার থেকে আনতে পারেন এবং সিওআরএস সমস্যাগুলি এড়াতে এটি আপনার সার্ভার থেকে পেতে পারেন ..

Comments

আপনি কি আপনার উত্তর সম্পর্কে আরও সুনির্দিষ্ট হতে পারেন, কারণ আমি সত্যিই সমস্ত ধারণা জানি না। আমি কীভাবে আমার সার্ভার থেকে সেই চিত্রটি আনব?

— ব্যবহারকারী 3465096

আপনি কোথা থেকে সেই চিত্রটি আনছেন, এটি কি আপনার সার্ভার বা অন্য কোনও থেকে এসেছে?

— প্রসন্ন আরথি

এটি এর মতো চলে: লোড ইমেজ ("উদাহরণ.jpg", 0, 0, 500, 300); আমি আমার কম্পিউটারে একই ফোল্ডারে এলোমেলো চিত্র url বা চিত্র রাখতে পারি, এটি এখনও একই

— ব্যবহারকারী 3465096

হ্যাঁ, তবে আমি

— পেইন্টে

আমি অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-উত্স দিয়েছি: ফাইলের জন্য, কিন্তু তবুও এটি ত্রুটিটি দেখায়

— হরিকৃষ্ণন

Answer 7

useCORS: trueবিকল্পটি ব্যবহার করে আমি সমস্যার সমাধান করেছি

 html2canvas(document.getElementsByClassName("droppable-area")[0], { useCORS:true}).then(function (canvas){
        var imgBase64 = canvas.toDataURL();
        // console.log("imgBase64:", imgBase64);
        var imgURL = "data:image/" + imgBase64;
        var triggerDownload = $("<a>").attr("href", imgURL).attr("download", "layout_"+new Date().getTime()+".jpeg").appendTo("body");
        triggerDownload[0].click();
        triggerDownload.remove();
    });

Answer 8

MDN থেকে [CORS সক্ষম চিত্র] [1] দেখুন। মূলত আপনার কাছে যথাযথ অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-উত্স শিরোনাম সহ একটি হোস্টিং ইমেজ থাকতে হবে।

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

আপনি এই চিত্রগুলি ডোম স্টোরেজে সংরক্ষণ করতে সক্ষম হবেন যেন সেগুলি আপনার ডোমেন থেকে সরবরাহ করা হয়েছে অন্যথায় আপনি সুরক্ষা সমস্যাটিতে চলে যাবেন।

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"; // insert image url here

img.crossOrigin = "Anonymous";

img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage( img, 0, 0 );
    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
img.src = src;
// make sure the load event fires for cached images too
if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}

Comments

যদিও এই লিঙ্কটি প্রশ্নের উত্তর দিতে পারে, উত্তরের প্রয়োজনীয় অংশগুলি এখানে অন্তর্ভুক্ত করা এবং রেফারেন্সের জন্য লিঙ্কটি সরবরাহ করা ভাল। লিঙ্কযুক্ত পৃষ্ঠাগুলি পরিবর্তিত হলে লিঙ্ক-শুধুমাত্র উত্তরগুলি অবৈধ হতে পারে। - পর্যালোচনা থেকে

— গৌতম শিব

নোটিশের জন্য ধন্যবাদ। আমি কেবল এমডিএন লিঙ্ক থেকে সামগ্রীটি যুক্ত করছি :)

— বার্লিনালি

Answer 9

ঠিক যেমন @ চিহ্নের উত্তরের উপর একটি বিল্ড — যদি আপনি একটি স্থানীয় সার্ভার তৈরি করতে চান। স্থানীয় সার্ভারে আপনার এই ত্রুটি থাকবে না।

আপনি যদি আপনার কম্পিউটারে পিএইচপি ইনস্টল করে থাকেন:

1. আপনার টার্মিনাল / সেন্টিমিটার খুলুন
2. আপনার ওয়েবসাইটের ফাইলগুলি যেখানে রয়েছে সেই ফোল্ডারে নেভিগেট করুন
3. এই ফোল্ডারে থাকা অবস্থায়, কমান্ডটি চালান php -S localhost:3000 the রাজধানী 'S' লক্ষ্য করুন
4. আপনার ব্রাউজারটি খুলুন এবং ইউআরএল বারে লোকালহোস্টে যান : 3000 । আপনার ওয়েবসাইটটি সেখানে চলমান উচিত।

অথবা

আপনার কম্পিউটারে নোড.জেস ইনস্টল করা থাকলে:

1. আপনার টার্মিনাল / সেন্টিমিটার খুলুন
2. আপনার ওয়েবসাইটের ফাইলগুলি যেখানে রয়েছে সেই ফোল্ডারে নেভিগেট করুন
3. এই ফোল্ডারে থাকা অবস্থায়, কমান্ডটি চালান npm init -y
4. চালান npm install live-server -gবাsudo npm install live-server -g একটি ম্যাক
5. রান করুন live-serverএবং এটি স্বয়ংক্রিয়ভাবে আপনার ওয়েবসাইট খোলার সাথে ব্রাউজারে একটি নতুন ট্যাব খুলতে হবে।

দ্রষ্টব্য: আপনার ফোল্ডারের মূলটিতে একটি index.html ফাইল রয়েছে মনে রাখবেন অন্যথায় আপনার কিছু সমস্যা হতে পারে।

Answer 10

আমি useCORS : true,আমার কোডে যুক্ত করে এই ত্রুটিটিও সমাধান করেছি -

html2canvas($("#chart-section")[0], {
        useCORS : true,
        allowTaint : true,
        scale : 0.98,
        dpi : 500,
        width: 1400, height: 900
    }).then();