ब्राउज़र क्रॉस-डोमेन के लिए कैनवास CORS समर्थन भरी हुई छवि हेरफेर

प्रश्न: ब्राउज़र संस्करणों क्रॉस-डोमेन छवियाँ कैनवास में इस्तेमाल के लिए CORS (क्रॉस-ओरिजिन रिसोर्स शेयरिंग) हेडर समर्थन करते हैं?ब्राउज़र क्रॉस-डोमेन के लिए कैनवास CORS समर्थन भरी हुई छवि हेरफेर

CORS दोनों क्रॉस डोमेन XMLHttpRequests करने और छवि अनुरोध करने के लिए आवेदन कर सकते हैं। इस सवाल के बारे में छवि का अनुरोध के लिए ब्राउज़र संस्करण अनुकूलता http://caniuse.com/cors मुद्दे पर स्पष्ट नहीं है और Google खोज कोई अच्छा परिणाम प्राप्त होते हैं करने के लिए मेरे सामान्य जाने है।

मैं हाल ही में एक क्रोम विकास ब्लॉग जिसका अर्थ है कि CORS समर्थन विस्तृत आधुनिक ब्राउज़रों में फैल गया था लेकिन क्योंकि WebGL सुरक्षा समस्याओं का तोड़ सकता मिला।
http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html

CORS पर अधिक विस्तार से:

हम कैनवास क्रॉस डोमेन छवि के अनुरोध W3C कार्यकारी ड्राफ्ट http://www.w3.org/TR/cors/#use-cases में वर्णित के रूप के साथ & CORS का उपयोग कर की व्यवहार्यता पर विचार कर रहे हैं। CORS एक फैशन तरह से फ्लैश crossdomain.xml का उपयोग करता है के समान में क्रॉस डोमेन संसाधन उपयोग की अनुमति के लिए एचटीएमएल कैनवास द्वारा प्रयोग किया जाता है। असल में, हम पढ़ने/छवि डेटा पिक्सल संपादित करना चाहते हैं और हम एक ही मूल प्रॉक्सी सर्वर का उपयोग करने के लिए नहीं करना चाहती।

आम तौर पर, यदि क्रॉस डोमेन भरी हुई और html कैनवास के साथ इस्तेमाल किया छवियों, canvas.toDataURL जैसे कार्यों का उपयोग कर() एक सुरक्षा त्रुटि फेंक होगा पिक्सल पहुंच रहे हैं। हालांकि, अगर छवि वितरित करने वाला सर्वर इस तरह का हेडर जोड़ता है, तो क्रॉस डोमेन उपयोग की अनुमति दी जानी चाहिए।

access-control-allow-origin: *

ब्राउज़र्स हम देखभाल अधिकांश के बारे में:

हम, फ्लैश का उपयोग कर कैनवास समर्थन की आईई की कमी को हल करने के लिए इतना एक CORS समस्या से डेस्कटॉप ब्राउज़र के लिए हम उसकी भी क्या कर सकते हैं योजना बना रहे हैं, लेकिन पर मोबाइल फ्लैश एक विकल्प नहीं है, और अनुरोधों को समान उत्पत्ति बनाने के लिए प्रॉक्सी का उपयोग करना हमारे उपयोग के मामले में एक विकल्प नहीं है। इसलिए, मैं विशेष रूप से एंड्रॉइड, आईफोन, सीओआरएस के लिए आईपीएडी ब्राउज़र समर्थन में रूचि रखता हूं।

स्रोत

2011-08-20 Glenn

टेस्ट परिणाम: खराब समाचार, यह केवल क्रोम में काम करता प्रतीत होता है। अन्य सभी ब्राउज़रों (एंड्रॉयड मोबाइल सहित) इस तरह एक त्रुटि दे:

Failed: DOM Exception: SECURITY_ERR (18)

मोबाइल उपकरणों के मैं एंड्रॉयड (सैमसंग गैलेक्सी कर्नेल संस्करण 2.6.32.9), iPhone और iPad V1 परीक्षण किया है और यह सब तीन में विफल रहा है।

आप इस URL के साथ अपने स्वयं मोबाइल डिवाइस का परीक्षण कर सकते हैं: http://maplarge.com/CrossOriginImageTest.html

टेस्ट स्क्रिप्ट:

<!DOCTYPE html> 
<html> 
<head> 
<title>Canvas Cross Origin Image Test: Testing for Canvas Cross Domain Image CORS Support</title> 
<script type="text/javascript"> 
    function initialize() { 

     //will fail here if no canvas support 
     try { 
      var can = document.getElementById('mycanvas'); 
      var ctx = can.getContext('2d'); 
      var img = new Image(); 
      img.crossOrigin = ''; 
      //domain needs to be different from html page domain to test cross origin security 
      img.src = 'http://lobbydata.com/Content/images/bg_price2.gif'; 
     } catch (ex) { 
      document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex.Message + "</span>"; 
     } 

     //will fail here if security error 
     img.onload = function() { 
      try { 
       var start = new Date().getTime(); 
       can.width = img.width; 
       can.height = img.height; 
       ctx.drawImage(img, 0, 0, img.width, img.height); 
       var url = can.toDataURL(); // if read succeeds, canvas isn't dirty. 
       //get pixels 
       var imgd = ctx.getImageData(0, 0, img.width, img.width); 
       var pix = imgd.data; 
       var len = pix.length; 
       var argb = []; //pixels as int 
       for (var i = 0; i < len; i += 4) { 
        argb.push((pix[i + 3] << 24) + (pix[i] << 16) + (pix[i + 1] << 8) + pix[i + 2]); 
       } 
       var end = new Date().getTime(); 
       var time = end - start; 
       document.getElementById("results").innerHTML = "<span style='color:Green;'>" + 
       "Success: Your browser supports CORS for cross domain images in Canvas <br>"+ 
       "Read " + argb.length+ " pixels in "+ time+"ms</span>"; 
      } catch (ex) { 
       document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex + "</span>"; 
      } 

     } 

    } 
</script> 
</head> 
<body onload="initialize()"> 
<h2>Canvas Cross Origin Image Test: Testing for Canvas Cross Domain Image CORS Support</h2> 
<h2><a href="http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html">What is CORS Image Security?</a></h2> 
<h1 id="results" style="color:Orange;">Testing...</h1> 
<canvas id="mycanvas"></canvas> 
<br /> 
<a href="/Example/List">More Examples</a> 
</body> 
</html>

स्रोत

2011-08-21 19:15:07 Glenn

मैं बस के बारे में इस बारे में एक प्रश्न पोस्ट करने के लिए किया गया था। खुशी है कि मैं अकेला नहीं सोच रहा हूं कि यह * काम * करना चाहिए। यह अब एफएफ 17 में काम करता है, लेकिन अभी भी आईई 10 में काम नहीं करता है। मान लीजिए मुझे अपने अनुरोधों के लिए प्रॉक्सी का उपयोग करना होगा। – pseudosavant

1.5 साल बाद अपडेट करें: विंडोज़ पर मैंने अभी आईई 9 (असफल), सफारी 5.0.5 (असफल), फ़ायरफ़ॉक्स (पास) और क्रोम (पास) – Glenn

को सफारी में आईपैड 3 पर डेमो पेज की जांच की और यह काम किया। – metric152

मैं सिर्फ दोनों सफारी में और क्रोम में अपने iPhone चल IOS 6 पर इस परीक्षण किया और आपका परीक्षण पृष्ठ परीक्षा पास करता है। मैंने इसे एक टिप्पणी के रूप में पोस्ट किया होगा लेकिन मुझे आपके उत्तर पर टिप्पणी पोस्ट करने का विकल्प नहीं दिया गया है।

स्रोत

2012-12-28 19:33:08 bfcoder

ग्रेट न्यूज! मेरी पोस्ट एक साल और आधा पुरानी है इसलिए मुझे लगता है कि ब्राउजर ने प्रगति की है। – Glenn

मैंने विंडोज 8 - आईई 10 में परीक्षण किया और यह अभी भी विफल रहता है। – bfcoder

मैक ओएसएक्स 10.7.5 - सफारी 6.0.2 में परीक्षण किया गया और यह गुजरता है। – bfcoder

आप नीचे दिए गए सभी क्या आप CROS बिना चाहते हैं, काम कर रहे उदाहरण प्राप्त करने के लिए php इस्तेमाल कर सकते हैं:

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
function a(x){ 
alert(x); 
var img = new Image(); 
      img.onload = function() 
      { 
      var canvas = document.createElement("canvas"); 
      canvas.width = img.width; 
      canvas.height = img.height; 
      var context = canvas.getContext("2d"); 
      context.fillStyle = "#ffffff"; 
      context.fillRect(0,0,img.width,img.height); 
      context.drawImage(img, 0, 0); 
      var data = canvas.toDataURL('image/jpeg' , 0.8); 
      document.write('<img src="'+data+'" />'); 
      };img.src = x; 
} 
</script> 
<?php 
$im = imagecreatefromjpeg('http://www.nasa.gov/images/content/711375main_grail20121205_4x3_946-710.jpg'); 
      ob_start(); 
      imagejpeg($im,NULL,100); 
      $outputBuffer = ob_get_clean(); 
      $base64 = base64_encode($outputBuffer); 
      $x= 'data:image/jpeg;base64,'.$base64; 
      echo "<script>a('".$x."')</script>"; 
?>

स्रोत

2013-01-08 13:39:18 varoniic

यह प्रॉक्सी सेवा की तरह दिखता है। यदि आप पृष्ठ को होस्ट करने वाले डोमेन को नियंत्रित करते हैं और इस स्क्रिप्ट को जोड़ सकते हैं, तो इसे काम करना चाहिए। हालांकि, ऐसे मामलों में जहां आप नहीं करते हैं तो आप सीओआरएस की सीमाओं से निपटने में फंस गए हैं। यह उन साइटों के लिए विशेष रूप से दर्दनाक है जो एम्बेड करने योग्य विजेट होस्ट करते हैं या एपीआई सेवाएं प्रदान करते हैं, क्योंकि इसका मतलब है कि एपीआई के प्रत्येक उपयोगकर्ता जो कैनवास के साथ छवियों को छूना चाहते हैं, उन्हें अपने डोमेन विशिष्ट प्रॉक्सी सेट करना होगा यदि वे उन ब्राउज़र को समायोजित करना चाहते हैं जो ठीक से नहीं हैं सीओआरएस लागू करें। चूंकि समस्या कई ब्राउज़रों में आम है, इसे अनदेखा नहीं किया जा सकता है। – Glenn

मुख्य बात यह है कि बेस 64 डीकोडेड छवि को कैनवास के लिए कोई सीओआरएस सीमाओं के कारण नहीं मिलना है। और एपीआई सेवाओं में छवि यूआरएल के बजाय ग्राहकों को बेस 64 डीकोडेड छवि देना भी संभव है। – varoniic

यदि आप 32 केबी के तहत हैं तो आप आईई 8 समर्थन भी प्राप्त कर सकते हैं। मैं टेक्स्ट रूपांतरण ब्लोट और डिकोडिंग प्रदर्शन के बारे में उत्सुक हूं। क्या आपने इस पर कोई आंकड़ा चलाया है? यह आदमी सुझाव देता है कि ब्लोट काफी बड़ा हो सकता है http://appcropolis.com/javascript-encode-images-dataurl/ – Glenn

ब्राउज़र क्रॉस-डोमेन के लिए कैनवास CORS समर्थन भरी हुई छवि हेरफेर

उत्तर

संबंधित मुद्दे