javascript - DOM Exception 18 while Detecting pixel color on a canvas -
i trying finish html5/javascript game , testing in crome.
whever pointing on image detecting pixel color there error display in console.
- unable image data canvas because canvas has been tainted cross-origin data. e001-4.html:27
- uncaught error: securityerror: dom exception 18
please tell me , what'wrong in code.
here code.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>canvas example 4 (detecting colors)</title> <script> window.onload = function () { var preview = document.getelementbyid('preview'); var r = document.getelementbyid('r'); var g = document.getelementbyid('g'); var b = document.getelementbyid('b'); var = document.getelementbyid('a'); var mx = document.getelementbyid('mx'); var = document.getelementbyid('my'); var canvas = document.getelementbyid('mycanvas'); canvas.addeventlistener('mousemove', move, false); var c = canvas.getcontext('2d'); var building = new image() building.src = "img/sprite1.png"; draw(); function draw () { c.drawimage(building, 0, 0, canvas.width, canvas.height); } function move (e) { mx.innerhtml = e.clientx; my.innerhtml = e.clienty; var img = c.getimagedata(e.clientx, e.clienty, 1, 1); var idata = img.data; var red = idata[0]; var green = idata[1]; var blue = idata[2]; var alpha = idata[3]; r.innerhtml = red; g.innerhtml = green; b.innerhtml = blue; a.innerhtml = (alpha > 0) ? alpha : 'transparent'; var rgba='rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')'; preview.style.backgroundcolor =rgba; } } </script> <style type="text/css" media="screen"> body { margin: 0px; padding: 0px; } canvas { border: 1px solid black; float: left; } ul { list-style: none; margin: 10px 10px 10px 10px; padding: 0px; float: left; } ul li { font-weight: bold; } ul li span { font-weight: normal; } ul li #preview { width: 50px; height: 50px; border: 1px solid black; } </style> </head> <body> <canvas id="mycanvas" width="300" height="300"> browser doesn't include support canvas tag. </canvas> <ul> <li><div id="preview"></div></li> <li>red: <span id="r">null</span></li> <li>green: <span id="g">null</span></li> <li>blue: <span id="b">null</span></li> <li>alpha: <span id="a">null</span></li> <li>mouse x: <span id="mx">null</span></li> <li>mouse y: <span id="my">null</span></li> </ul> </body> </html>
a local web server useful development tool.
but, if want test images while satisfying cors requirements check out dropbox.com.
if sign , put images in public folder, can satisfy cors restrictions applying building.crossorigin="anonymous";
Comments
Post a Comment