如何使用JavaScript/JQuery实现图片局部区域模糊？附代码求助

嘿，我来帮你搞定这个Canvas局部模糊的功能！你已经搭好了拖拽选框的基础框架，现在只需要补上选框区域的模糊处理逻辑和完善拖拽时的选框绘制就行。下面是完整的实现代码和关键步骤说明：

完整代码实现 #

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var rect = {};
var drag = false;
var imageObj = null;
// 离屏Canvas用于处理模糊，避免直接操作原画布导致的闪烁
var blurCanvas = document.createElement('canvas');
var blurCtx = blurCanvas.getContext('2d');

function init() {
    imageObj = new Image();
    imageObj.crossOrigin = 'anonymous'; // 处理跨域图片加载问题
    imageObj.onload = function () {
        // 设置画布尺寸和图片一致
        canvas.width = imageObj.width;
        canvas.height = imageObj.height;
        blurCanvas.width = imageObj.width;
        blurCanvas.height = imageObj.height;
        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;
    // 初始化选框的宽高
    rect.width = 0;
    rect.height = 0;
    drag = true;
}

function mouseUp() {
    if (!drag) return;
    drag = false;
    // 确保选框宽高为正（处理从右下往左上拖拽的情况）
    var x = Math.min(rect.startX, rect.startX + rect.width);
    var y = Math.min(rect.startY, rect.startY + rect.height);
    var w = Math.abs(rect.width);
    var h = Math.abs(rect.height);
    
    if (w > 0 && h > 0) {
        applyBlur(x, y, w, h);
    }
}

function mouseMove(e) {
    if (!drag) return;
    
    // 更新选框的宽高
    rect.width = e.pageX - this.offsetLeft - rect.startX;
    rect.height = e.pageY - this.offsetTop - rect.startY;
    
    // 重绘原图，清除之前的选框
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(imageObj, 0, 0);
    
    // 绘制选框边框
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 2;
    ctx.strokeRect(rect.startX, rect.startY, rect.width, rect.height);
}

// 实现局部模糊功能
function applyBlur(x, y, width, height) {
    // 1. 先把原图绘制到离屏Canvas
    blurCtx.drawImage(imageObj, 0, 0);
    
    // 2. 对离屏Canvas的指定区域应用模糊滤镜
    blurCtx.filter = 'blur(10px)'; // 模糊程度可调整，数值越大越模糊
    blurCtx.drawImage(blurCanvas, x, y, width, height, x, y, width, height);
    
    // 3. 将模糊后的区域绘制回主Canvas
    ctx.drawImage(blurCanvas, x, y, width, height, x, y, width, height);
    
    // 重置滤镜，避免影响后续绘制
    blurCtx.filter = 'none';
}

// 页面加载完成后初始化
window.onload = init;

关键功能说明 #

• 拖拽选框完善：在mouseMove函数里补充了选框边框的绘制，并且每次拖拽时重绘原图，确保选框不会残留。
• 跨域处理：添加了imageObj.crossOrigin = 'anonymous'，避免加载跨域图片时出现Canvas污染问题（如果你的图片是同域的可以去掉）。
• 模糊实现：使用离屏Canvas处理模糊，避免直接操作主画布导致的闪烁。通过filter: blur(10px)实现快速模糊，你可以调整10px这个数值来控制模糊程度。
• 选框兼容：处理了从右下往左上拖拽选框的情况，确保模糊区域始终是正的宽高。

如果你想要更精细的模糊效果（比如自定义模糊算法），也可以用getImageData获取像素数据，手动计算均值模糊后再用putImageData绘制回去，不过filter方式更简洁高效，适合大多数场景。

内容的提问来源于stack exchange，提问作者Boky