畫布 - 獲取像素顏色 - 我錯過了什麼？

-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

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)

我希望我失去了一些東西簡單

UPDATE我 - 它似乎$("<canvas/>)[0].getContext('2d');不是100％愉快的背景...

來源

2013-04-18 mplungjan

爲什麼這個否決後4年？ – mplungjan

在你2問題。（1）

（1）。調用ctx時只使用3個參數。drawImage

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>

來源

2013-04-18 17:55:52 markE

這聽起來前途，但毫無新意 - 畫布是小於圖像，爲imageData不回我更新的任何顏色[我的網頁]（http://plungjan.name/test/detectbackground.html） - 也如果hadn不是一個畫布對象，我怎麼會得到任何imageData，並沒有錯誤的ctx訪問？ – mplungjan

對我來說工作正常:)查看這個小提琴，你將不得不使用Mozilla瀏覽器來查看，因爲IE瀏覽器對於CORS是胡思亂想 - 但是代碼應該可以在你自己的網站上正常工作，因爲CORS不起作用：http：///jsfiddle.net/f6Gbp/1/（您的畫布與您的圖像尺寸相同，並且像素被正確採樣並倒置。） – markE

AH - 我必須調整大小。令人驚訝的是，你有一個CORS圖像站點，我嘗試了一個lorempixel的小提琴，因爲cors問題，它在Chrome和Fx中失敗了...... – mplungjan

畫布 - 獲取像素顏色 - 我錯過了什麼？

回答

相關問題