HTML5畫布不能應用sw濾鏡

我想要編寫的代碼可以過濾圖像的來源並返回可用作DOM中圖像標記源的數據。因此，我創建了一個虛擬畫布。目前它只能在DOM中使用真正的畫布，即使尺寸是錯誤的。我只想要轉換的圖像源和DOM中沒有畫布。HTML5畫布不能應用sw濾鏡

這是我需要它，但它不工作：js fiddle2

JS：

var image = new Image(); 
image.onload = function() { 

var helperCanvas = document.createElement('canvas'); 
var ctx = helperCanvas.getContext('2d'); 
ctx.width = image.width; 
ctx.height = image.height; 
ctx.drawImage(image, 0, 0, helperCanvas.width, helperCanvas.height); 
    var imageData = ctx.getImageData(0, 0, helperCanvas.width, helperCanvas.height); 

    filter(imageData); 

    data_as_source = ctx.putImageData(imageData, 0, 0).toURL(); 

    var img = new Image(); 
    img.src = data_as_source; 
    context.drawImage(img,0,0); 
} 

image.src = ....

來源

2013-06-11 daisy

我沒有在所示的代碼中看到「DOM中的畫布」......此外，如果沒有畫布，您將如何獲取像素數據？ – dandavis

我想使用像這樣的[jsfiddle]（http://jsfiddle.net/NEF8n/9/）但ctx.putImageData（imageData，0，0）不起作用 – daisy

與錯IMG尺寸和不必要的畫布在DOM js fiddle

這一個工程在您的演示代碼中，您應該更改臨時畫布寬度/高度，而不是上下文的。

helperCanvas.width = image.width; 
    helperCanvas.height = image.height;

這是帶有測試過濾器的代碼，它只是將所有非透明像素變成紅色。

它還將過濾後的畫布圖像呈現在頁面上的圖像上。

BTW，創建圖像對象時，也可避免新的Chrome漏洞，如果你創建這樣的：必須在瀏覽器或FF被視爲

var img=document.createElement("img");

小提琴（IE == CORS失敗）：http://jsfiddle.net/m1erickson/LeGD5/

這裏是代碼：

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.createElement("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var img=document.createElement("img"); 
    img.onload=function(){ 
     canvas.width=img.width; 
     canvas.height=img.height; 
     ctx.drawImage(img,0,0,img.width,img.height); 

     // test -- turn every non-transparent pixel red 
     var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
     var pixels = imgData.data; // get pixel data 
     for (var i = 0; i < pixels.length; i +=4) 
     { 
      // if this pixel is not transparent, 
      // mask it in pure red 
      if(pixels[i+3]>0){ 
       pixels[i]=255; // this is the red component of the pixel 
       pixels[i+1]=0; // this is the green component of the pixel 
       pixels[i+2]=0; // this is the blue component of the pixel 
       pixels[i+3]=255; // this is the alpha component of the pixel 
      } 
     } 
     ctx.putImageData(imgData, 0, 0);  

     var theImage=document.getElementById("theImage"); 
     theImage.src=canvas.toDataURL(); 
    } 
    img.crossOrigin="anonymous"; 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png"; 



}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <img id="theImage" width=300 height=300> 
</body> 
</html>

來源

2013-06-11 20:56:54 markE

謝謝markE !!! – daisy

你必須在你的dataURL部分一對夫婦的錯誤，但是這似乎工作：

var image = new Image(); 
    image.onload = function() { 

    var helperCanvas = document.createElement('canvas'); 
    var ctx = helperCanvas.getContext('2d'); 
    ctx.width = image.width; 
    ctx.height = image.height; 
    ctx.drawImage(image, 0, 0, helperCanvas.width, helperCanvas.height); 
     var imageData = ctx.getImageData(0, 0, helperCanvas.width, helperCanvas.height); 

     filter(imageData); 
     ctx.putImageData(imageData, 0, 0); 
     //context.drawImage(img,0,0); 

     data_as_source = helperCanvas.toDataURL(); 

     var img = new Image(); 
     img.src = data_as_source; 
     img.style.border="3px solid red";// for demo sake 
     document.body.appendChild(img); // for demo sake 
    }

來源

2013-06-11 21:00:05 dandavis

HTML5畫布不能應用sw濾鏡

回答

相關問題