刪除像素的垂直線

Question

我想刪除一個垂直線，寬度爲10像素，圖像的高度。我正在使用畫布。 我無法發佈這jsfiddle因爲我無法加載圖像。

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

canvas.height = 200; 
canvas.width = 200; 
Caman(canvas, "studipo.jpg", function() { 
    var base64encoded = GetResizedImage(canvas, 200, 200, 200, 160);  
}); 


function GetResizedImage(canvas, width, height, croppingWidth, croppingheight) { 
var ctx = canvas.getContext("2d"); 

var oldid = ctx.getImageData(0, 0, width, height); 

var newCanvas = document.createElement("canvas"); 

newCanvas.width = croppingWidth; 

newCanvas.height = croppingheight; 

var newContext2d = newCanvas.getContext("2d"); 

var vnewid = newContext2d.createImageData(width, height); 

var oldArray = Array.from(oldid.data); 

console.log(oldArray); 

var arrayToInsert = []; 


for (var y = 0; y < height; ++y) { 
    for (var x = 0; x < width; ++x) { 
     if (y > 90 && y < 130) { // this is how we remove a horizontal line worth of 20 pixels in width. 

     } 
     else { 
      var index = (y * width + x) * 4; // index of the current pixel      
      arrayToInsert.push(oldArray[index]); 
      arrayToInsert.push(oldArray[index + 1]); 
      arrayToInsert.push(oldArray[index + 2]); 
      arrayToInsert.push(oldArray[index + 3]); 
     } 
    } 
} 

for (var i = 0; i < 200; i = i + 1) { 


    for (var j = 0; j < 160; j++) { 
     var index = (i * width + j) * 4; 
     if (j < 80 && j > 70) { 

      // this draw a vertical line of pixels that have (0,0,0,0) in rgb+a in the middle of the image. 
      arrayToInsert[index] = 0; 
      arrayToInsert[index + 1] = 0; 
      arrayToInsert[index + 2] = 0; 
      arrayToInsert[index + 3] = 0 


      // uncomment this. 
      // arrayToInsert.splice (index, 4); 
      // this does not work for some reason, but it should 

     } 
    } 
} 

vnewid.data.set(arrayToInsert); 
newContext2d.putImageData(vnewid, 0, 0, 0, 0, 200, 160); 

var newC = newCanvas.toDataURL(); 
console.log(newC); 

// take this console.log base64 encoded image and put it here. 

// https://codebeautify.org/base64-to-image-converter 

} 

在這一行。

   arrayToInsert[index] = 0; 
       arrayToInsert[index + 1] = 0; 
       arrayToInsert[index + 2] = 0; 
       arrayToInsert[index + 3] = 0; 

我可以得出一個符合this.However一條垂直線，如果我嘗試完全刪除那些像素，圖像數據被破壞，它是沒有意義的，我不明白爲什麼。

arrayToInsert.splice (index, 4); 

而不是使所有這些像素（0 0 0 0），我想刪除它們，以便圖像被裁剪。

這裏是鏈接到3個文件

https://drive.google.com/open?id=0B06HbozeqdkZXzNDUTJKelVZMmc

注（一個html，用照片和JS）：我想在圖像的中間裁剪，而不是邊緣圖片。

像這裏的蛋糕。

http://static2.businessinsider.com/image/57ee8fa7dd0895e5358b4d30-907/cutting%20cake%20into%20rectangles%202%20skitch.jpg

我將削減的矩形第i將在2份蛋糕的壓入彼此，所以它成爲一個單一的蛋糕，除了與在中間具有裁切出矩形。

Answer 1

當您爲新畫布創建ImageData時，您會看起來很亂。看看這一行：

var vnewid = newContext2d.createImageData(width, height); 

就在那裏你說：「我要創建的這些數據與原始數據大小完全一樣」。您正在創建一個200x200數據對象，您正嘗試使用190x160像素進行填充。

如果你想要做的只是修剪一些高度，那就好了。 ImageData將被解釋爲從左到右，從上到下。對於前160行，它包含每行中的所有數據。其餘的，它沒有數據，所以它只是假定該區域是空白的。都好。

當你試圖削減水平的東西，，使它看起來很時髦。每行從下一行逐漸增加10px和10px，使圖像看起來偏斜和鋸齒。

我解決了這個問題通過改變調用

var vnewid = newContext2d.createImageData(croppingWidth, croppingheight); 

但有幾個問題。

• 對GetResizedImage()的調用沒有考慮到有10個像素較少。那裏應該有一個190。
• 當您將ImageData放入newContext2d時，您需要再次輸入190或使用croppingWidth。

最後但並非最不重要的一點，當你裁剪時，你有一個錯誤的問題。你正在裁剪39個像素和19個像素。注意：

if (y > 90 && y < 130) { 

這將需要開始91如果更改了那些爲>=或<= 129之後停止像素，這將是罰款。

這是一些改進的代碼。由於我不想得到一張照片，所以我用紅圈即興創作。請注意，您可以將數據網址置於<img>而不必使用其他某個網站。

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

 
function fillSrc(canvas) { 
 
    var ctx = canvas.getContext('2d'); 
 
    ctx.fillStyle = 'red'; 
 
    ctx.beginPath(); 
 
    ctx.ellipse(100, 100, 100, 100, Math.PI * 2, 0, Math.PI * 2); 
 
    ctx.fill(); 
 
} 
 

 
canvas.height = 200; 
 
canvas.width = 200; 
 
document.body.appendChild(canvas); 
 

 
fillSrc(canvas); 
 

 
var base64encoded = GetResizedImage(canvas, 200, 200, 190, 160); 
 

 

 
function GetResizedImage(canvas, width, height, croppingWidth, croppingheight) { 
 
    var ctx = canvas.getContext("2d"); 
 

 
    var oldid = ctx.getImageData(0, 0, width, height); 
 

 
    var newCanvas = document.createElement("canvas"); 
 

 
    newCanvas.width = croppingWidth; 
 

 
    newCanvas.height = croppingheight; 
 

 
    var newContext2d = newCanvas.getContext("2d"); 
 

 
    var vnewid = newContext2d.createImageData(croppingWidth, croppingheight); 
 

 
    var oldArray = Array.from(oldid.data); 
 

 
    console.log(oldArray); 
 

 
    var arrayToInsert = []; 
 

 
    for (var y = 0; y < height; ++y) { 
 
    for (var x = 0; x < width; ++x) { 
 
     if (y >= 90 && y < 130) { 
 
     // Take out 40 pixels in a vertical section 
 
     } else if (x >= 70 && x < 80) { 
 
     // Take out 20 pixels in a horizontal section 
 
     } else { 
 
     var index = (y * width + x) * 4; // index of the current pixel      
 
     arrayToInsert.push(oldArray[index]); 
 
     arrayToInsert.push(oldArray[index + 1]); 
 
     arrayToInsert.push(oldArray[index + 2]); 
 
     arrayToInsert.push(oldArray[index + 3]); 
 
     } 
 
    } 
 
    } 
 

 
    console.log(arrayToInsert); 
 

 
    vnewid.data.set(arrayToInsert); 
 
    newContext2d.putImageData(vnewid, 0, 0, 0, 0, croppingWidth, croppingheight); 
 

 
    var newC = newCanvas.toDataURL(); 
 
    document.getElementById('test').src = newC; 
 
    console.log(newC); 
 

 
    // take this console.log base64 encoded image and put it here. 
 

 
    // https://codebeautify.org/base64-to-image-converter 
 

 
}

<img id="test" />

Answer 2

從我瞭解你需要的是使透明的圖像的一部分，是不是？

arrayToInsert[index + 3] = 0;

這將做的工作對你來說，作爲第四值是透明度。 Ps：我在這裏測試過，效果很好。我很快就會發布jsfiddle