编辑：

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

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

编辑：

根据你的小提琴更新：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);

Answer 2

工作jsfiddle：https://jsfiddle.net/zoh5o9p5/

如果您使用base64图像并进行一些更改，它将按预期工作

在mouseMove函数中做了一些更改。

function mouseMove(e) {
    if (drag) {

        ctx.filter = 'blur(5px)';
        ctx.drawImage(imageObj, 0, 0);
        rect.w = (e.pageX - this.offsetLeft) - rect.startX;
        rect.h = (e.pageY - this.offsetTop) - rect.startY;
        ctx.strokeStyle = 'blue';

        if(rect.w>0 && rect.h>0)
        {
            imgDrow=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);

        w=rect.w<0?rect.startX+rect.w:rect.startX; 
        h=rect.h<0?rect.startY+rect.h:rect.startY;
        if(imgDrow)
        {
            ctx.putImageData(imgDrow,w, h);
        }
        ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);

    }

工作jsfiddle：https://jsfiddle.net/zoh5o9p5/

使用Javascript / Jquery模糊部分图像

2 个答案:

编辑：