Question

我正在为相框实现接缝雕刻算法。

https://en.wikipedia.org/wiki/Seam_carving

我知道这个算法不是很好，因为它从图片中切出一条直缝，然而好消息是我正在为这个图片框架＆＃34;，所以你可以想象它会工作得很好。

因此，如果图像的宽度为100像素，我想删除第50个像素的垂直线。然后它将是99像素的宽度。

这是伪，我删除了我以前的代码尝试

将图像加载到画布。
删除一条宽度为1像素且高度等于加载图像的垂直线。如果该图像的宽度等于100，则现在为99.
获取新处理图像的Base64编码字符串。

我想要做的是删除一条宽度为1像素，高度等于图像的垂直线，然后将图像绘制到画布上并获得base64编码图像。

Answer 1

您可以将原始图像用作源，然后将画布设置为最终尺寸，例如：

＆＃13;

var img=new Image; img.onload=carve; img.src = "//i.stack.imgur.com/OqB5r.jpg";

function carve() {
  var ctx = c.getContext("2d");
  var cut = 50;        // we remove [50, 50 + carveWidth>, in this case
  var carveWidth = 16; // exaggerated to show noticeable change
  
  // set final size of canvas:
  c.width = this.width - carveWidth;
  c.height = this.height;
  
  // draw in first half using clip arguments of drawImage()
  ctx.drawImage(this, 0, 0, cut, this.height, 0, 0, cut, this.height);

  // draw in second half, notice we skip cut+carve for source, but not for dest.
  ctx.drawImage(this, cut + carveWidth, 0, this.width, this.height,
                      cut             , 0, this.width, this.height);
                      
  // save out canvas
}

＆＃13;

canvas {border:1px solid red} /* to show actual canvas size */

＆＃13;

<canvas id=c></canvas>

＆＃13;

对于算法，您需要做类似的事情，但要使用雕刻路径作为上半部分的掩码：

以目标尺寸绘制图像（完整）
使用复合模式删除不规则似乎使用闭合路径剪切出后半部分
使用复合模式destination-over
在图像中绘制减去接缝的偏移量 - 这将在上半部分后面绘制，形成完整的图像

对每个接缝重复。

Answer 2

这是答案。注意我正在使用Caman，因此在加载图像时我不会失去质量，并且浏览器的线程不会因caman非阻塞线程模型而被阻止。

https://github.com/meltingice/CamanJS

这可以在webworker中完成，for循环可以进行像素迭代。

如果有人提供更有效的方法，请提出建议，我将来可能会这样做，但我现在没有时间。

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

    canvas.height = 200;
    canvas.width = 200;
    Caman(canvas, "download.png", function () {



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

    var oldid = ctx.getImageData(0, 0, 360, 360);

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


    newCanvas.width = 360;
    newCanvas.height = 340;

    var vnewid = newContext2d.createImageData(360, 360);


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

    console.log(oldArray);

    var arrayToInsert = [];

    for (var y = 0; y < 360; ++y) {

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

            } else {
                var index = (y * 360 + 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]);
            }
        }
    }

    vnewid.data.set(arrayToInsert);
    newContext2d.putImageData(vnewid, 0, 0, 0, 0, 360, 340);

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

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

   // https://codebeautify.org/base64-to-image-converter
});

这是html

   <html>
        <head>
            <meta charset="utf-8" />
            <title></title>

            <script type="text/javascript" src="camanjs.js"></script>
        </head>
        <body>
            <img width="200" height="200" id="f1img" src="download.png" />
            <div >
                <canvas id="myCanvas"></canvas>

            </div>

            <script src="index.js"></script>
        </body>

    </html>

html5 canvas删除垂直/水平线像素值

2 个答案: