Image 画布-获得像素颜色-我缺少什么？_Image_Html5 Canvas

Image 画布-获得像素颜色-我缺少什么？

image html5-canvas

Image 画布-获得像素颜色-我缺少什么？,image,html5-canvas,Image,Html5 Canvas,使用此代码作为基础我的代码如下： $canvas = $('<canvas/>'); ctx = $canvas[0].getContext('2d'); var image = new Image(); // create an image object in memory image.onload = function () { // render the image on the canvas $canvas.width

使用此代码作为基础

我的代码如下：

    $canvas = $('<canvas/>');
    ctx = $canvas[0].getContext('2d');
    var image = new Image(); // create an image object in memory
    image.onload = function () {
      // render the image on the canvas
      $canvas.width(this.width).height(this.height); // resize the canvas
      ctx.drawImage(image, 0, 0, this.width, this.height); 
      var nav =  $("#navigation"); // get the navigation container
      // find a pixel about in the middle where the navigation would be
      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 this canvas 
      // invert the pixel colour, ignoring the alpha channel
      var invertedPixelColor = "rgba("+(255-pixel[0])+", "+
                                       (255-pixel[1])+", "+
                                       (255-pixel[2])+", "+
                                       1+")"; 
      nav.css("color",invertedPixelColor); // set the nav text to inverted color
    }
    image.src = imageURL; // load the image, triggering the calc

它回来了

before: rgba(0, 0, 0, 0) 
after: rgba(255, 255, 255, 1)

我希望我错过了一些简单的事情

更新我是-似乎

$（“”[0].getContext（'2d'）；

不是100%满意的上下文…

关于你的两个问题

（1） .调用ctx.drawImage时仅使用3个参数

ctx.drawImage(image,0,0);

（2）。您正在创建的jquery$canvas对象似乎不是html画布元素

因此，您需要修改jquery元素的创建，或者只使用老式的document.createElement

canvas=document.createElement("canvas");

这两个调整，你很好去

<!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, this should likely be 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 I do not append it anywhere it is not rendered
        canvas = document.createElement("canvas");
        ctx = canvas.getContext('2d');
        var image = new Image(); // create an image object in memory
        image.onload = function () {

          // render the image on the canvas
          canvas.width=this.width;
          canvas.height=this.height; // resize the canvas
          ctx.drawImage(image, 0, 0); 
          var nav =  $("#navigation"); // get the navigation container
          // find a pixel about in the middle where the navigation would be
          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 this canvas 

          var invertedPixelColor = "rgba("+(255-pixel[0])+", "+(255-pixel[1])+", "+(255-pixel[2])+", "+1+")"; // invert it, ignoring the alpha channel
          nav.css("color",invertedPixelColor); // set the nav text to inverted color
          // here you could save the colour and reuse it 
          // if the user navigates to the same image
        }
        image.src = imageURL; // load the image, triggering the 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>


根据背景设置文本颜色的测试
var-ctx；
$（function（）{//在页面加载时，这可能是在图像转换时
$（“.nav”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
var imageURL=$（this.data（“img”）；
$（“#content”）.css（“背景”、“url”（+imageURL+））；
//在内存中创建画布对象。
//因为我没有将它附加到任何地方，所以它不会被渲染
canvas=document.createElement（“canvas”）；
ctx=canvas.getContext（'2d'）；
var image=new image（）；//在内存中创建图像对象
image.onload=函数（）{
//在画布上渲染图像
canvas.width=this.width；
canvas.height=this.height；//调整画布大小
ctx.drawImage（图像，0,0）；
var nav=$（“#导航”）；//获取导航容器
/在导航的中间找到一个像素。
var pos={left:nav.position（）.left+（nav.width（）/2），top:nav.position（）.top+（nav.height（）/2）}
var pixel=ctx.getImageData（位置左侧，位置顶部，1,1）；
canvas=null；//不再需要此画布
var invertedPixelColor=“rgba（“+（255像素[0]）+”、“+（255像素[1]）+”、“+（255像素[2]）+”、“+1+”）”；//将其反转，忽略alpha通道
css（“color”，inversedpixelcolor）；//将导航文本设置为反转颜色
//在这里，您可以保存颜色并重新使用
//如果用户导航到同一图像
}
image.src=imageURL；//加载图像，触发计算
});
});
#导航{文本对齐：居中}
#内容{宽度：640px；高度：480px；背景：url（city-q-c-640-480-6.jpg）}
此文本应根据背景具有不同的颜色

|  |

这听起来很有希望，但并没有什么新鲜事-画布比图像小，imageData不会返回我更新过的任何颜色-而且如果它不是画布对象，我如何获得任何imageData并且在ctx访问中没有错误？对我来说很好：）请查看这把小提琴，您必须使用Mozilla的Chrome浏览器查看，因为IE是关于CORS的怪癖——但是代码应该在您自己的站点上运行良好，因为CORS不起作用：（您的画布与您的图像大小相同，并且像素被正确采样和反转。）啊-我确实需要调整大小。令人惊讶的是，你有一个CORS图像站点，我尝试了一个在Chrome和Fx中失败的lorempixel，因为CORS问题…为什么这在4年后被否决了？

<!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, this should likely be 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 I do not append it anywhere it is not rendered
        canvas = document.createElement("canvas");
        ctx = canvas.getContext('2d');
        var image = new Image(); // create an image object in memory
        image.onload = function () {

          // render the image on the canvas
          canvas.width=this.width;
          canvas.height=this.height; // resize the canvas
          ctx.drawImage(image, 0, 0); 
          var nav =  $("#navigation"); // get the navigation container
          // find a pixel about in the middle where the navigation would be
          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 this canvas 

          var invertedPixelColor = "rgba("+(255-pixel[0])+", "+(255-pixel[1])+", "+(255-pixel[2])+", "+1+")"; // invert it, ignoring the alpha channel
          nav.css("color",invertedPixelColor); // set the nav text to inverted color
          // here you could save the colour and reuse it 
          // if the user navigates to the same image
        }
        image.src = imageURL; // load the image, triggering the 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>