-1

このコードをベース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

実行例

この例には次の問題があります。

  1. イメージがキャンバスに正しくレンダリングされないのはなぜですか? (デモを下にスクロールして、レンダリングされたキャンバスを確認します)
  2. 画像データから 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％幸せな状況ではないようです...

4

1 に答える 1

0

On you 2 questions.

(1). Use just use 3 arguments when calling ctx.drawImage

ctx.drawImage(image,0,0);

(2). The jquery $canvas object you're creating doesn't appear to be an html canvas element.

したがって、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>
于 2013-04-18T17:55:52.013 に答える