javascript - 使用 Javascript/Jquery 模糊图像的一部分

Question

我正在尝试模糊照片的一部分。我的代码如下:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var rect = {};
var drag = false;
var imageObj = null;

function init() {
    imageObj = new Image();
    imageObj.onload = function () { ctx.drawImage(imageObj, 0, 0); };
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mousemove', mouseMove, false);
}

function mouseDown(e) {
    rect.startX = e.pageX - this.offsetLeft;
    rect.startY = e.pageY - this.offsetTop;
    drag = true;
}

function mouseUp() { drag = false; }

function mouseMove(e) {
    if (drag) {
        ctx.clearRect(0, 0, 500, 500);
        ctx.drawImage(imageObj, 0, 0);
        rect.w = (e.pageX - this.offsetLeft) - rect.startX;
        rect.h = (e.pageY - this.offsetTop) - rect.startY;
        ctx.strokeStyle = 'blue';
        ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
        ctx.filter = 'blur(5px)';

    }
}
//
init();

<canvas id="canvas" width="500" height="500"></canvas>

我绘制了一个矩形，但我只想将模糊滤镜应用于该矩形，而不是像现在这样应用于整个图像。知道如何做到这一点吗？

Here is the fiddle

Answer 1

可以使用HTML5 Canvas

我做了一个 fiddle 来模糊图像中的 350 部分。
fiddle 链接:https://jsfiddle.net/k6aaqdx6/3/

编辑:

根据您的 fiddle 更新:https://jsfiddle.net/tbjLk6eu/2

我添加的代码:

imgData=ctx.getImageData(rect.startX, rect.startY, rect.w, rect.h);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.filter = 'none';
ctx.drawImage(imageObj, 0, 0);
ctx.putImageData(imgData,rw, rh);
ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);