刪除像素的垂直線

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;

我可以用一條垂直線畫一條線。但是，如果我嘗試完全刪除那些像素，則圖像數據會損壞，這毫無意義，我也不明白為什么。

arrayToInsert.splice (index, 4); 

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

這是指向3個文件（html，使用的照片和js）的鏈接。

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

注意：我想在圖像的中間進行裁切，而不是在圖像的邊緣進行裁切。

喜歡這里的蛋糕。

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

我會切成一個矩形，因為我會將蛋糕的2個部分彼此壓在一起，所以它變成了一個蛋糕，除了中間有一個裁剪好的矩形。

Answer 1

據我了解，您需要的是使圖像的那部分透明，不是嗎？

arrayToInsert[index + 3] = 0;

這將為您完成工作，因為第四個值是透明度。 附言：我在這里進行了測試，效果很好。 我即將發布jsfiddle

Answer 2

為新畫布創建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之后停止的像素。如果將其中一個更改為>=或<= ，都可以。

這是一些改進的代碼。 因為我不想得到圖像，所以我用紅色圓圈即興創作。 請注意，您可以將數據URL放在<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" />