html5 - origin - habilitar cors
Browser Canvas CORS Soporte para manipulación de imágenes cargadas por dominios cruzados (3)
PREGUNTA: ¿Qué versiones de navegador son compatibles con los encabezados CORS (Intercambio de recursos de origen cruzado) para Cross Domain Images utilizados en Canvas?
CORS puede aplicarse tanto a solicitudes de imágenes XMLHttpRequests de dominio cruzado como a solicitudes de imágenes. Esta pregunta se trata de solicitudes de imágenes Mi normalidad para la compatibilidad de la versión del navegador http://caniuse.com/cors no está claro sobre el problema y la búsqueda en Google no arroja buenos resultados.
Encontré un reciente blog de desarrollo de Chrome que implica que el soporte de CORS estaba muy extendido en los navegadores modernos, pero podría romperse debido a problemas de seguridad de WebGL.
http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
Más detalles sobre CORS:
Estamos considerando la viabilidad de usar canvas y CORS con solicitudes de imágenes de dominios cruzados, tal como se describe en W3C Working Draft http://www.w3.org/TR/cors/#use-cases . CORS es utilizado por lienzo html para permitir el uso de recursos de dominio cruzado de forma similar a la forma en que flash usa crossdomain.xml. Básicamente, queremos leer / editar los píxeles de datos de imagen y no queremos usar un mismo servidor proxy de origen.
Normalmente, si las imágenes se cargan en el dominio cruzado y se usan con el lienzo html, acceder a los píxeles utilizando funciones como canvas.toDataURL () generará un error de seguridad. Sin embargo, si el servidor que entrega la imagen agrega un encabezado como este, se debe permitir el uso del dominio cruzado.
access-control-allow-origin: *
Navegadores que más nos importan:
Estamos planeando trabajar con la falta de soporte de lienzo de IE utilizando flash, por lo que para navegadores de escritorio con un problema de CORS también podemos hacerlo, pero en flash móvil no es una opción, y usar un proxy para hacer que las solicitudes tengan el mismo origen no es una opción en nuestro caso de uso. Por lo tanto, estoy particularmente interesado en Andriod, Iphone, soporte de navegador de iPad para CORS.
Acabo de probar esto en mi iPhone con iOS 6 tanto en Safari como en Chrome y su página de prueba pasa la prueba. Lo habría publicado como un comentario, pero no tengo la opción de publicar un comentario en tu respuesta.
Puede usar php para obtener todo lo que desee sin CROS, ejemplo de trabajo a continuación:
<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>";
?>
Resultados de la prueba : malas noticias, parece que solo funciona en Chrome. Todos los demás navegadores (incluido Android Mobile) dan un error como este:
Failed: DOM Exception: SECURITY_ERR (18)
Dispositivos móviles Probé con Android (samsung galaxy kernel versión 2.6.32.9), Iphone y iPad V1 y falló en los tres.
Puede probar su propio dispositivo móvil con esta URL: http://maplarge.com/CrossOriginImageTest.html
El script de prueba:
<!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>