Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>Test Results</strong>: Bad News, it appears to only work in Chrome. All other browsers (including Android Mobile) give an error like this:</p> <pre><code>Failed: DOM Exception: SECURITY_ERR (18) </code></pre> <p><strong>Mobile Devices</strong> I tested Android (samsung galaxy kernel version 2.6.32.9), Iphone and IPAD V1 and it failed in all three. </p> <p>You can test your own mobile device with this URL: <a href="http://maplarge.com/CrossOriginImageTest.html" rel="noreferrer">http://maplarge.com/CrossOriginImageTest.html</a></p> <p><strong>The Test Script:</strong></p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Canvas Cross Origin Image Test: Testing for Canvas Cross Domain Image CORS Support&lt;/title&gt; &lt;script type="text/javascript"&gt; 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 = "&lt;span style='color:Red;'&gt;Failed: " + ex.Message + "&lt;/span&gt;"; } //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 &lt; len; i += 4) { argb.push((pix[i + 3] &lt;&lt; 24) + (pix[i] &lt;&lt; 16) + (pix[i + 1] &lt;&lt; 8) + pix[i + 2]); } var end = new Date().getTime(); var time = end - start; document.getElementById("results").innerHTML = "&lt;span style='color:Green;'&gt;" + "Success: Your browser supports CORS for cross domain images in Canvas &lt;br&gt;"+ "Read " + argb.length+ " pixels in "+ time+"ms&lt;/span&gt;"; } catch (ex) { document.getElementById("results").innerHTML = "&lt;span style='color:Red;'&gt;Failed: " + ex + "&lt;/span&gt;"; } } } &lt;/script&gt; &lt;/head&gt; &lt;body onload="initialize()"&gt; &lt;h2&gt;Canvas Cross Origin Image Test: Testing for Canvas Cross Domain Image CORS Support&lt;/h2&gt; &lt;h2&gt;&lt;a href="http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html"&gt;What is CORS Image Security?&lt;/a&gt;&lt;/h2&gt; &lt;h1 id="results" style="color:Orange;"&gt;Testing...&lt;/h1&gt; &lt;canvas id="mycanvas"&gt;&lt;/canvas&gt; &lt;br /&gt; &lt;a href="/Example/List"&gt;More Examples&lt;/a&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload