image - Canvas - get pixel colour - what am I missing? -
using code base http://www.script-tutorials.com/demos/158/index.html
i code following:
$canvas = $('<canvas/>'); ctx = $canvas[0].getcontext('2d'); var image = new image(); // create image object in memory image.onload = function () { // render image on canvas $canvas.width(this.width).height(this.height); // resize canvas ctx.drawimage(image, 0, 0, this.width, this.height); var nav = $("#navigation"); // navigation container // find pixel in middle navigation var pos = { left: nav.position().left+(nav.width()/2), top: nav.position().top+(nav.height()/2) } var pixel = ctx.getimagedata(pos.left,pos.top, 1, 1).data; canvas=null; // no longer need canvas // invert pixel colour, ignoring alpha channel var invertedpixelcolor = "rgba("+(255-pixel[0])+", "+ (255-pixel[1])+", "+ (255-pixel[2])+", "+ 1+")"; nav.css("color",invertedpixelcolor); // set nav text inverted color } image.src = imageurl; // load image, triggering calc i have following issues example:
- why image not render correctly canvas? (scroll down in demo see canvas rendered)
- why 0s image data?
i have
window.console && console.log("before: rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")"); window.console && console.log("after: rgba("+(255-pixel[0])+", "+(255-pixel[1])+", "+(255-pixel[2])+", "+1+")"); and returns
before: rgba(0, 0, 0, 0) after: rgba(255, 255, 255, 1) i hope missing simple
update - seems $("<canvas/>)[0].getcontext('2d'); not 100% happy context...
on 2 questions.
(1). use use 3 arguments when calling ctx.drawimage
ctx.drawimage(image,0,0); (2). jquery $canvas object you're creating doesn't appear html canvas element.
so you're jquery element creation needs fixin' or use old fashioned document.createelement.
canvas=document.createelement("canvas"); those couple of tweaks you're go.
<!doctype html> <html> <head> <title>testing setting text colour depending on background</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> var ctx; $(function(){ // on page load, should on image transition $(".nav").on("click", function(e) { e.preventdefault(); var imageurl = $(this).data("img"); $("#content").css("background","url("+imageurl+")"); // creating canvas object in memory. // since not append anywhere not rendered canvas = document.createelement("canvas"); ctx = canvas.getcontext('2d'); var image = new image(); // create image object in memory image.onload = function () { // render image on canvas canvas.width=this.width; canvas.height=this.height; // resize canvas ctx.drawimage(image, 0, 0); var nav = $("#navigation"); // navigation container // find pixel in middle navigation var pos = {left: nav.position().left+(nav.width()/2), top: nav.position().top+(nav.height()/2) } var pixel = ctx.getimagedata(pos.left,pos.top, 1, 1).data; canvas=null; // no longer need canvas var invertedpixelcolor = "rgba("+(255-pixel[0])+", "+(255-pixel[1])+", "+(255-pixel[2])+", "+1+")"; // invert it, ignoring alpha channel nav.css("color",invertedpixelcolor); // set nav text inverted color // here save colour , reuse // if user navigates same image } image.src = imageurl; // load image, triggering calc }); }); </script> <style> #navigation { text-align:center } #content { width:640px; height:480px; background: url(city-q-c-640-480-6.jpg) } </style> </head> <body> <div id="content"> <div id="navigation">this text should have different color depending on background<br/> <a href="#" class="nav" data-img="city-q-c-640-480-5.jpg">city 1</a> | <a href="#" class="nav" data-img="city-q-c-640-480-6.jpg">city 2</a> | <a href="#" class="nav" data-img="city-q-c-640-480-2.jpg">city 3</a> </div> </div> <div id="test"></div> </body> </html>
Comments
Post a Comment