HTML5 photoshop类多边形套索选择

Question

我希望建立一个工具，通过让用户创建一个封闭的形状来削减照片的一部分。用户应该能够开始绘制线条。从a点到b点，再到c，e，d，e，f ....最终再次指向a以关闭形状。

为此，我想使用HTML5画布。我认为这可能是一个很好的选择，我正在考虑使用像flashcanvas这样的东西作为IE/旧浏览器的后备？

有没有什么教程/开源应用程序可以用来构建这类东西？这是我第一次使用HTML5 canvas构建应用程序，所以有什么我应该担心的陷阱吗？

Answer 1

我认为这是canvas的高级用法。你必须知道基础知识，如何绘画，如何使用图层，如何操纵像素。只需向谷歌索要教程即可。

假设你知道前面的内容，我会试一试。我以前从来没有这样做过，但我有一个想法：

你需要3个画布：

• 包含您的图片的层(图片的大小)
• 用户绘制选择形状的层(图片的大小，在第一个画布的顶部)
• a result canvas，将包含您裁剪的图片(相同大小，不需要显示)

当用户点击你的图片时:实际上，他点击了图层，图层就被清除了，一条新的线开始了。

当他再次单击它时，将绘制上一条开始线，并开始另一条线，依此类推。你一直这样做，直到你点击一个非空白的像素(这意味着你关闭了形状)。

如果你想让用户预览线，你需要另一个画布(这里解释为http://dev.opera.com/articles/view/html5-canvas-painting/#line )

当形状关闭时，用户必须在形状内部或外部单击以确定要选择的部分。例如，你用半透明的灰色填充那部分(这里解释的泛洪填充http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/ )

现在，层画布包含一个与用户选择相对应的彩色形状。

从层中获取像素数据并读取数组，每次在索引i处找到非空白像素时，将该像素从主画布复制到结果画布：

/* First, get pixel data from your 3 canvas into 
 * layerPixData, resultPixData, picturePixData 
*/

// read the entire pixel array
for (var i = 0 ; i < layerPixData.length ; i+=4 ) {
    //if the pixel is not blank, ie. it is part of the selected shape
    if ( layerPixData[i] != 255 || layerPixData[i+1]  != 255 || layerPixData[i+2] != 255 ) {
        // copy the data of the picture to the result
        resultPixData[i] = picturePixData[i]; //red
        resultPixData[i+1] = picturePixData[i+1]; //green
        resultPixData[i+2] = picturePixData[i+2]; //blue
        resultPixData[i+3] = picturePixData[i+3]; //alpha

        // here you can put the pixels of your picture to white if you want

    }

}

如果您不知道像素操作是如何工作的，请阅读此https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas

然后，使用putImageData将像素绘制到结果画布。任务完成了！

如果你想移动你选择的行，方法是：http://simonsarris.com/blog/225-canvas-selecting-resizing-shape

Answer 2

下面是你应该怎么做:下面的代码在你的页面上添加了一个画布，然后通过点击和拖动，选择区域将被高亮显示。在那之后，你需要做的是从底层页面中创建一个屏幕截图，并在画布中创建一个遮罩层，并将其应用于屏幕截图，就像在其他答案中显示的一样。

/* sample css code for the canvas
#overlay-canvas {
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    opacity: 0.4;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
*/

function getHighIndex(selector) {
    if (!selector) { selector = "*" };

    var elements = document.querySelectorAll(selector) ||
                   oXmlDom.documentElement.selectNodes(selector);
    var ret = 0;

    for (var i = 0; i < elements.length; ++i) {
        if (deepCss(elements[i],"position") === "static")
            continue;

        var temp = deepCss(elements[i], "z-index");

        if (temp != "auto")
            temp = parseInt(temp, 10) || 0;
        else
            continue;

        if (temp > ret)
            ret = temp;
    }
    return ret;
}

maxZIndex = getHighIndex();

$.fn.extend({
    lasso: function () {
        return this
        .mousedown(function (e) {
            // left mouse down switches on "capturing mode"
            if (e.which === 1 && !$(this).is(".lassoRunning")) {
                var point = [e.offsetX, e.offsetY];
                $(this).addClass("lassoRunning");
                $(this).data("lassoPoints", [point]);
                $(this).trigger("lassoStart", [point]);
            }
        })
        .mouseup(function (e) {
            // left mouse up ends "capturing mode" + triggers "Done" event
            if (e.which === 1 && $(this).is(".lassoRunning")) {
                $(this).removeClass("lassoRunning");
                $(this).trigger("lassoDone", [$(this).data("lassoPoints")]);
            }
        })
        .mousemove(function (e) {
            // mouse move captures co-ordinates + triggers "Point" event
            if ($(this).is(".lassoRunning")) {
                var point = [e.offsetX, e.offsetY];
                $(this).data("lassoPoints").push(point);
                $(this).trigger("lassoPoint", [point]);
            }
        });
    }
});


function onLassoSelect() {
    // creating canvas for lasso selection
    var _canvas = document.createElement('canvas');
    _canvas.setAttribute("id", "overlay-canvas");
    _canvas.style.zIndex = ++maxZIndex;
    _canvas.width = document.width
    _canvas.height = document.height
    document.body.appendChild(_canvas);
    ctx = _canvas.getContext('2d'),
    ctx.strokeStyle = '#0000FF';
    ctx.lineWidth = 5;

    $(_canvas)
        .lasso()

        .on("lassoStart", function(e, lassoPoint) {
            console.log('lasso start');

            var pos = lassoPoint;
            ctx.beginPath();
            ctx.moveTo(pos[0], pos[1]);
            console.log(pos);
        })

        .on("lassoDone", function(e, lassoPoints) {
            console.log('lasso done');

            var pos = lassoPoints[0];
            ctx.lineTo(pos[0], pos[1]);
            ctx.fill();
            console.log(pos);
        })

        .bind("lassoPoint", function(e, lassoPoint) {
            var pos = lassoPoint;
            ctx.lineTo(pos[0], pos[1]);
            ctx.fill();
            console.log(pos);
        });
}