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

我会剪切一个矩形，我会将蛋糕的两个部分压在一起，所以它变成了一个蛋糕，除了中间有一个裁剪出来的矩形。

Answer 1

从我所理解的你所需要的是使图像的那部分变得透明，不是吗？

arrayToInsert[index + 3] = 0;

这将为您完成工作，因为第四个值是透明度。 Ps：我在这里测试过，它工作正常。我很快就会发布一个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之后停止。如果您将其中任何一个更改为>=或<=，那就没问题了。

这是一些改进的代码。由于我不想拍摄图像，所以我用红色圆圈即兴创作。请注意，您可以将数据网址放在<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" />

删除一个像素的垂直线

2 个答案: