Blur part of the image with Javascript/Jquery

Question

I'm trying to blur a part of the photo. My code is as follows:

 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> 

I draw a rectangle but I want to apply the blur filter only on that rectangle not to the whole image as it is now. Any idea how to do that?

Here is the fiddle

Answer 1

It is possible by using HTML5 Canvas

I have made a fiddle to blur the part 350 from image.
Fiddle Link: https://jsfiddle.net/k6aaqdx6/3/

Edit:

updated according to your fiddle: https://jsfiddle.net/tbjLk6eu/2

Code that I added:

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

working jsfiddle: https://jsfiddle.net/zoh5o9p5/

If you use a base64 image and do some changes it will work as you expected

made some changes in mouseMove function.

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);

    }

working jsfiddle: https://jsfiddle.net/zoh5o9p5/