কীভাবে আইমেজডেটা () ত্রুটিটি ঠিক করবেন? ক্যানভাসটি ক্রস-অরিজিন ডেটা দ্বারা কলঙ্কিত হয়েছে?

131

আমার কোডটি আমার লোকালহোস্টে খুব ভালভাবে কাজ করছে তবে এটি সাইটে কাজ করছে না।

কনসোল থেকে এই ত্রুটিটি পেয়েছি, এই লাইনের জন্য .getImageData(x,y,1,1).data:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

আমার কোডের অংশ:

jQuery.Event.prototype.rgb=function(){
        var x =  this.offsetX || (this.pageX - $(this.target).offset().left),y =  this.offsetY || (this.pageY - $(this.target).offset().top);
        if (this.target.nodeName!=="CANVAS")return null;
        return this.target.getContext('2d').getImageData(x,y,1,1).data;
    }

দ্রষ্টব্য: আমার চিত্র url (src) একটি সাবডোমেন url থেকে

javascript html html5-canvas

— এরফান সাফারপুর
সূত্র

8

Img.src স্থানীয় আপেক্ষিক ইউআরএল থাকা সত্ত্বেও আমি এই ত্রুটিটি পাচ্ছি: "img / foo.png" - তাহলে এ সম্পর্কে ক্রস-অরিজিন কী?

— সানফোর্ড Staab

স্ট্যাকওভারফ্লো.com / a / 16218015 / 5175433 দেখুন : "ক্রোম একই ডোমেন থেকে স্থানীয় স্থানীয় ফাইলগুলি উত্স হিসাবে বিবেচনা করে না" "

— এএপি

116

অন্যরা যেমন বলেছে আপনি ক্রস অরিজিন ডোমেন থেকে লোড করে ক্যানভাসকে "কলঙ্কিত" করছেন।

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

তবে, আপনি কেবল সেটিংস স্থাপন করে এটি প্রতিরোধ করতে সক্ষম হতে পারেন:

img.crossOrigin = "Anonymous";

এটি কেবল তখনই কাজ করে যদি দূরবর্তী সার্ভারটি নিম্নলিখিত শিরোনামটিকে যথাযথভাবে সেট করে:

Access-Control-Allow-Origin "*"

ড্রপবক্স ফাইল চয়নকারী যখন "সরাসরি লিঙ্ক" বিকল্পটি ব্যবহার করে এই একটি বড় উদাহরণ। আমি আমার ক্যানভাসে রিমোট ড্রপবক্স ইমেজ ইউআরএল থেকে চিত্রগুলি হোভার করার জন্য এটি বিজোড়প্রিন্টস.কম এ ব্যবহার করি এবং তারপরে চিত্রটি ডেটা আমার সার্ভারে জমা দিতে। সমস্ত জাভাস্ক্রিপ্টে

— ম্যাট পোড়া
সূত্র

1

Jsfiddle.net এ কোনও ইমগুর ইমেজ লোড করার সময় এটি এই ত্রুটিটি সমাধান করতে কাজ করেছিল

— ট্র্যাভিস জে

3

আমার পক্ষে কাজ করা যদি আমি প্রথমে ক্রসরিগিন রাখি তবে উত্স সেট করুন এবং তারপরে ডেটা অনলোড

— জোনস

2

এটি যদি কোনও স্থানীয় ফাইল হয় এবং আপনার অ্যাপটি ইন্টারনেট ব্যবহার করে না? একটি অ্যান্ড্রয়েড ওয়েবভিউ অ্যাপ্লিকেশন এবং চিত্রটি ঠিক এইচটিএমএল ফাইলের মতো একই ফোল্ডারে রয়েছে। এটি এর সমাধান করে না।

— কার্টিস

44

আমি দেখতে পেয়েছি যে .setAttribute('crossOrigin', '')304 টির প্রতিক্রিয়া না হওয়ায় URL এর ক্যোয়ারী স্ট্রিংয়ের জন্য আমাকে একটি টাইমস্ট্যাম্প যুক্ত করতে হয়েছিল এবংAccess-Control-Allow-Origin শিরোনামের ।

এই আমাকে দেয়

var url = 'http://lorempixel.com/g/400/200/';
var imgObj = new Image();
imgObj.src = url + '?' + new Date().getTime();
imgObj.setAttribute('crossOrigin', '');

— কারবি
সূত্র

3

স্থানীয় ফাইলটিতে সার্ভার ছাড়াই এটি চেষ্টা করে: 'ফাইলটিতে চিত্রের অ্যাক্সেস: /// সি: /.../img/colorPaletteCtrl.png? 1507058959277' উত্স 'নাল' থেকে অবরুদ্ধ করা হয়েছে: অবৈধ প্রতিক্রিয়া । মূল 'নাল' এর ফলে অ্যাক্সেসের অনুমতি নেই।

— সানফোর্ড Staab

1

কেবল imgObj.setAttribute('crossOrigin', '')আমার জন্য এটি সমাধান করা ব্যবহার করে - ধন্যবাদ! img.crossOrigin = "Anonymous"পাশাপাশি কাজ করে (যেমন এখানে উল্লেখ করা হয়েছে )। @ স্যানফোর্ড স্টাটাব ব্রাউজারগুলি স্থানীয় ফাইলগুলিকে অন্য ডোমেন হিসাবে দেখায়, অন্যথায় ওয়েবসাইটের মালিকরা আপনার স্থানীয় ফাইলগুলি পড়তে পারে। আপনাকে একই ডোমেন থেকে চিত্রগুলির অনুরোধ করতে হবে, বা আপনার অনুরোধের প্রতিক্রিয়া হিসাবে শিরোনামগুলিকে ব্রাউজারকে জানাতে হবে যে অন্য ডোমেনের কোডটি সেই ফাইলটি পড়ার জন্য ঠিক আছে।

19

আপনি অন্য সার্ভার থেকে সরাসরি কোনও ক্যানভাসে চিত্রগুলি আঁকতে পারবেন না এবং তারপরে ব্যবহার করতে পারবেন না getImageData । এটি একটি সুরক্ষা সমস্যা এবং ক্যানভাসটিকে "কলঙ্কিত" হিসাবে বিবেচনা করা হবে।

পিএইচপি ব্যবহার করে আপনার সার্ভারে চিত্রের একটি অনুলিপি সংরক্ষণ করে কেবল নতুন চিত্রটি লোড করা কি আপনার পক্ষে কাজ করবে? উদাহরণস্বরূপ, আপনি পিএইচপি স্ক্রিপ্টে ইউআরএল প্রেরণ করতে এবং এটি আপনার সার্ভারে সংরক্ষণ করতে পারেন, তারপরে আপনার জাভাস্ক্রিপ্টে নতুন ফাইলের নামটি এভাবে ফিরিয়ে দিন:

<?php //The name of this file in this example is imgdata.php

  $url=$_GET['url'];

  // prevent hackers from uploading PHP scripts and pwning your system
  if(!@is_array(getimagesize($url))){
    echo "path/to/placeholderImage.png";
    exit("wrong file type.");
  }

  $img = file_get_contents($url);

  $fn = substr(strrchr($url, "/"), 1);
  file_put_contents($fn,$img);
  echo $fn;

?>

আপনি এই জাতীয় কিছু অ্যাজাক্স জাভাস্ক্রিপ্ট সহ পিএইচপি স্ক্রিপ্ট ব্যবহার করবেন:

xi=new XMLHttpRequest();
xi.open("GET","imgdata.php?url="+yourImageURL,true);
xi.send();

xi.onreadystatechange=function() {
  if(xi.readyState==4 && xi.status==200) {
    img=new Image;
    img.onload=function(){ 
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    }
    img.src=xi.responseText;
  }
}

আপনি যদি ব্যবহার getImageData ক্যানভাসে করেন তবে এটি ঠিকঠাক কাজ করবে।

বিকল্পভাবে, আপনি যদি পুরো চিত্রটি সংরক্ষণ করতে না চান, আপনি আপনার পিএইচপি স্ক্রিপ্টে এক্স & ওয়্যার স্থানাঙ্কগুলি পাস করতে পারেন এবং সেই দিকের পিক্সেলের আরজিবা মান গণনা করতে পারেন। আমি মনে করি পিএইচপি-তে এই জাতীয় চিত্র প্রক্রিয়াকরণ করার জন্য ভাল লাইব্রেরি রয়েছে।

আপনি যদি এই পদ্ধতির ব্যবহার করতে চান তবে এটি প্রয়োগ করতে আপনার যদি সহায়তার দরকার হয় তবে আমাকে জানান।

সম্পাদনা -১: পীপগুলি উল্লেখ করেছে যে পিএইচপি স্ক্রিপ্টটি উদ্ভাসিত হয়েছে এবং ইন্টারনেটকে সম্ভবত এটি দূষিতভাবে ব্যবহার করার অনুমতি দেয়। এটি পরিচালনা করার জন্য কয়েক মিলিয়ন উপায় রয়েছে, ইউআরএল অবধি বিভ্রান্ত করার অন্যতম সহজতম উপায় ... আমি মনে করি সুরক্ষিত পিএইচপি পদ্ধতিগুলি পৃথক গুগল প্রাপ্য; পি

সম্পাদনা -২: জনপ্রিয় চাহিদা অনুসারে, আমি এটি একটি চিত্র এবং পিএইচপি স্ক্রিপ্ট নয় তা নিশ্চিত করার জন্য একটি চেক যুক্ত করেছি (থেকে: পিএইচপি ফাইলটি কোনও চিত্র কিনা তা পরীক্ষা করে দেখুন )।

— জয়া
সূত্র

15

অতিরিক্ত হিসাবে - স্থানীয় ফাইল সিস্টেম থেকে চিত্র এবং স্ক্রিপ্ট লোড করা একই সমস্যা তৈরি করে।

— গাই ড্যাফনি

2

এটি খুব সুরক্ষিত নয় যে কেউ পিএইচপি স্ক্রিপ্ট ব্যবহার করে আপনার সার্ভারকে

— দূষিতভাবে প্লাবিত

1

@ এলএএক্স 1 ডিডিইউ উত্তরটি একটি সাধারণ সুরক্ষা চেকের সাথে উন্নত হয়েছে

— জাম্পজ্যাক

1

এই পদ্ধতির জন্য ধন্যবাদ, নোড.জেএস ব্যবহার না করেই tesseract.js ওসিআর ইঞ্জিনে একটি চিত্র পাস করাও সম্ভব (কেবলমাত্র img.onload () ফাংশনে Tesseract.recognize (img) এ কল যুক্ত করুন

— জাম্পজ্যাক

1

আপনাকে ফাইলের নাম, ফাইল / মাইমের ধরণ, অবস্থান এবং ব্যবহারকারীরা প্রদত্ত আপলোডের আকার যাচাই করতে হবে। এই কোডটি বেশ কয়েকটি আক্রমণে ঝুঁকিপূর্ণ। আমি এটি পাঠকের কাছে অনুশীলন হিসাবে ছেড়ে দেব, তবে আমি বিশ্বাস করি যে এই কোডের সাহায্যে .php ফাইলগুলি ওয়েব সার্ভারের মূলটিতে আপলোড করা সম্ভব।

— hiburn8

4

আমি Chromeস্থানীয়ভাবে আমার কোড পরীক্ষা করার সময় আমি এই ত্রুটিটি দেখছিলাম। আমি স্যুইচ করেছি Firefoxএবং ত্রুটিটি আর দেখতে পাচ্ছি না। অন্য কোনও ব্রাউজারে স্যুইচ করা দ্রুত সমাধান।

যদি আপনি প্রথম উত্তরে প্রদত্ত সমাধানটি ব্যবহার করে থাকেন, তবে ভেরিয়েবলটি img.crossOrigin = "Anonymous";ঘোষণা করার পরে আপনি অবশ্যই যুক্ত করেছেন তা নিশ্চিত করুন img(উদাহরণস্বরূপ var img = new Image();)।

— সাফওয়ান
সূত্র

2

আপনার সমস্যাটি হ'ল আপনি একটি বাহ্যিক চিত্র লোড করেছেন যার অর্থ অন্য ডোমেন থেকে। আপনি যখন আপনার ক্যানভাস প্রসঙ্গে কোনও ডেটা অ্যাক্সেস করার চেষ্টা করেন এটি একটি সুরক্ষা ত্রুটির কারণ হয়ে দাঁড়ায়।

— axelduch
সূত্র

হ্যাঁ, আমি আপলোড সাবডোমেন থেকে চিত্র পেয়েছি ... আমি কী করব?

— এরফান সাফপুরপুর

1

ঠিক আছে আপনি নিজের চিত্র পুনরুদ্ধার করতে একটি প্রক্সি ব্যবহার করতে পারেন, আপনি যে ক্যানভাস চালাচ্ছেন তার মতোই এই প্রক্সিটি একই ডোমেনে থাকবে on

— axelduch

1

আমি আমার কম্পিউটার থেকে নতুন চিত্র আপলোড করছি এবং এটি ক্যানভাসে লোড করার চেষ্টা করছি এবং আমি এই ত্রুটি পাচ্ছি। আমি কোনও ধরণের সার্ভার চিত্র ব্যবহার করছি না।

— পীযূষ ধোলারিয়া

আপনার কম্পিউটারটি সেই সার্ভারের দ্বারা দেখা যায় যেখানে স্ক্রিপ্টটি বাহ্যিক ডোমেন হিসাবে অবস্থিত (তবে মৃত্যুদন্ড কার্যকর করা হয়নি) যেমন ক্যানভাসে অনুলিপি করা চিত্রটি আপনার কম্পিউটারে তৈরি হয়েছে, যেখানে স্ক্রিপ্টটি আসলে কার্যকর করা হয়।

— জাম্পজ্যাক

2

ক্রস অরিজিন ডোমেন থেকে লোড করে আপনি ক্যানভাসকে "কলঙ্কিত" করছেন। এই এমডিএন নিবন্ধটি দেখুন:

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

— srquinn
সূত্র

— এরফান সাফপুরপুর

1

আপনি কোন ব্রাউজারে পরীক্ষা করছেন? এবং আপনি অ্যাপাচি পুনরায় চালু করেছেন তা নিশ্চিত করুন।

— srquinn

আমি অ্যাপাচি পুনরায় আরম্ভ করতে পারি না ... আমার সিপিএনএল অ্যাকাউন্ট রয়েছে।

— এরফান সাফপুরপুর

2

দুঃখিত, আপনার অ্যাপাচি সেটআপটি আপনাকে কনফিগার করতে সহায়তা করতে পারে না sorry এটি এই প্রশ্নের ক্ষেত্রের বাইরেও। নতুন প্রশ্নে অ্যাপাচি সেটআপ সম্পর্কিত আপনার সমস্যাগুলি পোস্ট করুন এবং সম্প্রদায় আপনাকে সেখানে সহায়তা করে খুশি হবে।

— srquinn

1

লোকাল এ কাজ করার সময় একটি সার্ভার যুক্ত করুন

লোকাল নিয়ে কাজ করার সময় আমারও একই সমস্যা ছিল। আপনি ইউআরএল স্থানীয় ফাইল যেমন: ফাইল / ///User/PeterP/Desktop/folder/index.html জন্য পথ হতে চলেছে।

দয়া করে মনে রাখবেন যে আমি একটি ম্যাক এ আছি।

আমি বিশ্বব্যাপী এইচপি-সার্ভার ইনস্টল করে এটি পেয়েছি। https://www.npmjs.com/package/http-server

পদক্ষেপ:

গ্লোবাল ইনস্টল: npm install http-server -g
সার্ভার চালান: http-server ~/Desktop/folder/

পিএস: আমি ধরে নিয়েছি আপনি নোড ইনস্টল করেছেন, অন্যথায় আপনি খুব বেশি এনপিএম কমান্ড পাবেন না।

— আনাস
সূত্র

0

যেমন ম্যাটের পোড়া তার উত্তরে বলে , আপনার যেখানে সমস্যার চিত্রগুলি হোস্ট করা হয়েছে সেখানে সার্ভারে CORS সক্ষম করার প্রয়োজন হতে পারে।

যদি সার্ভার এ্যাপাচি, এই নিম্নলিখিত স্নিপেট (থেকে যোগ করে কাজ করা যেতে পারে এখানে ) হয় আপনার VirtualHost কনফিগ অথবা একটি থেকে .htaccessফাইল:

<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>

... যদি এটি ভার্চুয়ালহোস্টে যুক্ত করা হয় তবে আপনাকে সম্ভবত অ্যাপাচি কনফিগারেশনটিও পুনরায় লোড করতে হবে (উদাহরণস্বরূপ sudo service apache2 reloadযদি অ্যাপাচি লিনাক্স সার্ভারে চলছে)

— নিক এফ
সূত্র

0

আমার সমস্যাটি এতটাই গণ্ডগোলিত হয়েছিল যে কোনও সিআরএস সমস্যা হতে পারে না তা নিশ্চিত করার জন্য আমি কেবল মাত্র 6464 চিত্রটি এনকোড করেছি

— bumsoverboard
সূত্র

-2

আমি আজ একই সমস্যার মুখোমুখি, এবং নিম্নলিখিত কোড দ্বারা এটি সমাধান।

এইচটিএমএল কোড:

<div style='display: none'>
  <img id='img' src='img/iak.png' width='600' height='400' />
</div>
<canvas id='iak'>broswer don't support canvas</canvas>

জেএস কোড:

var canvas = document.getElementById('iak')
var iakImg = document.getElementById('img')
var ctx = canvas.getContext('2d')
var image = new Image()
image.src=iakImg.src
image.onload = function () {
   ctx.drawImage(image,0,0)
   var data = ctx.getImageData(0,0,600,400)
}

উপরের মত কোড, এবং কোনও ক্রস-ডোমেন সমস্যা নেই।

— Karry
সূত্র

1

Src মানটি এখনও একটি ক্রস উত্স উত্স তাই এটি কীভাবে সমস্যাটি এড়াতে পারে?

— লাভেন ডায়াল

স্থানীয় এইচটিএমএল ফাইল (সার্ভার নেই) যেমন ফাইল: /// এক্স: / htmlfile.html চালানোর সময় এই পদ্ধতির কাজ করে। বেশিরভাগ লোক ";" দিয়ে তাদের বক্তব্য শেষ করে। "ভ্যার ডেটা = .." স্টেটমেন্টটির বিন্দু কী? আমি কেন এটি "ক্রস-ডোমেন" ত্রুটি এড়ানো যায় তার একটি বিবরণ চাই। তবে এটি, ধন্যবাদ।

— ডিসক্রমলে

ডাবল স্মার্ট ক্যারি

— মারি সেলভান

1

@dcromley "বেশিরভাগ লোক তাদের বক্তব্য শেষ করে;" সেমিকোলনগুলি ব্যবহারের মান হিসাবে সুপারিশ করা হয় না। সেমিকোলন কেবল আরও কাজ যুক্ত করে, কুরুচিপূর্ণ দেখায় এবং কোডগুলি এগুলি ছাড়াই পুরোপুরি কাজ করে। চেক github.com/standard/standard

— madprops

1

@ মোডপ্রোপস ডেভেলপার.মোজিলা.আর.জিগ বলছে "জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনগুলিতে উপযুক্ত বাক্য গঠন সহ বিবৃতি রয়েছে। একক বিবৃতিতে একাধিক লাইন বিস্তৃত হতে পারে each প্রতিটি বিবৃতি একটি সেমিকোলন দ্বারা পৃথক করা হলে একক লাইনে একাধিক বিবৃতি ঘটতে পারে This এটি কোনও কীওয়ার্ড নয় , তবে কীওয়ার্ডের একটি গ্রুপ " সুতরাং আমি "সর্বদা ব্যবহার করুন" দলের মধ্যে আছি। আমি জানতাম না যে "কখনই" দল নয়। আমি পরেও ধরে নিলাম পৃথিবী সমতল? (স্রেফ মজা করছি - ধন্যবাদ)

— ডিসক্রিমলি

-3

আমার একই সমস্যা ছিল, এবং আমার জন্য এটি কেবল কনটেক্সেট করে কাজ করেছিল https:${image.getAttribute('src')}

— লিভিয়া রেট
সূত্র

আপনি কী করেছেন দয়া করে তা ব্যাখ্যা করুন

— ইয়েহুদা শোয়ার্জ