Question

我有一个像素化（模糊）背景和正常图像。

用户将鼠标按住几次后，如何将图像恢复正常？ Jquery的。

示例：

Answer 1

从您的问题来看，您尝试实现的目标有点不清楚，但假设您的意思是如何将一个图像中的图像稀疏/绘制到另一个图像中，只需使用以下步骤：

将目标图像（在本例中为正常）设置为画布的背景图像。
在画布中绘制模糊版本 - 这将覆盖目标图像
将复合模式更改为destination-out，这将删除您绘制的内容。

您当然必须实现鼠标和绘图的逻辑。

以下是 live demo here 的示例。

初始代码可以是：

var ctx = $('#demo')[0].getContext('2d'), /// get context
    img = new Image,                      /// load a new image
    isDown = false,                       /// for mouse button
    radius = 15;                          /// eraser radius

/// setup logic

$(img).on('load', function() {            /// onload for image

    /// when image has been loaded, attach event listeners for mouse
    $('#demo').on('mousedown', function(e) {
        isDown = true;
        erase(getXY(e));
    })
    .on('mousemove', function(e) {
        if (isDown) erase(getXY(e));
    })
    .on('mouseup', function(e) {
        isDown = false;
    });

    /// draw blurred image        
    ctx.drawImage(img, 0, 0);

    /// change composite mode so we can erase
    ctx.globalCompositeOperation = 'destination-out';
});
img.src = 'http://i.imgur.com/mi3zfEX.jpg'; /// blurred image

画布的目标背景（正常）用CSS定义：

#demo {
    background:url(http://i.imgur.com/v85BQ8k.jpg) no-repeat left top;
    cursor:crosshair;
}

然后我们只需要在鼠标位置绘制一些东西来稀疏叠加层并显示背景：

function erase(pos) {
    ctx.beginPath();                               /// start new path
    ctx.arc(pos.x, pos.y, radius, 0, 2 * Math.PI); /// draw a circle
    ctx.closePath();                               /// close path
    ctx.fill();                                    /// fill it
}

我们可以用任何颜色填充它 - 它无关紧要因为它会在它被绘制的区域中擦除，因为我们使用destination-out模式进行复合模式。

我们唯一需要做的就是调整鼠标位置，以便我们相对于画布绘制 - 此函数返回一个具有x和y属性的对象：

function getXY(e) {
    var r = $('#demo')[0].getBoundingClientRect();
    return {x: e.clientX - r.left, y: e.clientY - r.top};
}

鼠标悬停在jQuery之后，将像素化（模糊）图像淡化为正常

1 个答案: