Question

将此代码用作基础http://www.script-tutorials.com/demos/158/index.html

我编写以下代码：

    $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

Running example

我在示例中遇到以下问题：

为什么图像无法正确呈现到画布上？（在演示中向下滚动以查看渲染的画布）
为什么我只从图像数据中获得0？

我有

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+")");

然后返回

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

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

更新我 - 似乎$("<canvas/>)[0].getContext('2d');不是100％满意的上下文......

Answer 1

关于你2个问题。

（1）。调用ctx.drawImage时只需使用3个参数

ctx.drawImage(image,0,0);

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

所以你的jquery元素创建需要fixin'或者只是使用旧式的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>

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

1 个答案: