Javascript 画布模糊过滤器挂起浏览器，同时渲染大尺寸图像，如'；2000 x 3000'；

我正在尝试制作一个jquery插件，通过画布过滤图像。我从这个链接中找到了一些过滤代码

问题是，当我应用对比度、灰度效果时，它们工作得很好，没有挂断浏览器，运行平稳，但当我对“2000x3000”等大尺寸图像使用模糊效果时，浏览器会挂断

这是我的插件代码（仅适用于blur）：

我需要一个简单的模糊代码，这将不会挂起浏览器。请给我一个解决方案

---

谢谢

我不会详细介绍您的代码，但让我们从一件与您的问题无关的大事开始：您不会等待图像加载后再将其绘制到画布上。这在某些UAs上可能有效，但在其他UAs上肯定会失败

现在，来谈谈模糊问题

你自己在大图像上做模糊效果会很慢，因为你必须在所有像素上迭代多次，这很好，但也可能会挂起浏览器

因此，您可能希望在Worker中运行algo，以避免在进行计算时冻结主页面，尽管计算速度仍然很慢：

var img=newimage（）；
img.onload=init；
img.crossOrigin='匿名'；
img.src=”https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/John_William_Waterhouse_A_Mermaid.jpg/800px-John_William_Waterhouse_A_Mermaid.jpg";
函数initWorker（）{
var worker_file=new Blob（[worker_script.textContent]）；
var worker\u url=url.createObjectURL（worker\u文件）；
返回新工作者（工作者url）；
}
函数init（）{
var-worker=initWorker（）；
var c=document.createElement（'canvas'）；
var ctx=c.getContext（'2d'）；
c、 宽度=canvas.width=img.width；
c、 高度=canvas.height=img.height；
var visibleCtx=canvas.getContext（'2d'）；
风险价值金额=2；
var-blur=5；
worker.onmessage=函数（e）{
visibleCtx.putImageData（即数据，0,0）；
模糊+=数量；
如果（模糊>10 | |模糊=0&&aCloseData[e]
   (function ($) {
$.fn.canfilter = function (options) {
    var thisobg = $(this);
    var canvas = document.createElement('canvas');
    thisobg.empty();
    thisobg.append(canvas);
    var context;
    var iW = $(".cropped").find('img').innerWidth(); // image width
    var iH = $(".cropped").find('img').innerHeight(); // image height
    var p1 = 0.99;
    var p2 = 0.99;
    var p3 = 0.99;
    var er = 0; // extra red
    var eg = 0; // extra green
    var eb = 0; // extra blue
    var iBlurRate = 0;
    var func = 'color'; // last used function
     if (options === 'blur1') {
        resetToBlur1();
    }
    else if (options === 'blur2') {
        resetToBlur2();
    }
    else {
        //do default action
    }

    // ------------------------- blur ---------------------
    function Blur() {
        func = 'blur'; // last used function
        var imgObj = new Image();
        imgObj.src = $(".cropped").find('img').attr('src');//$("#image").attr('src');
        canvas.width = iW;
        canvas.height = iH;
        context = canvas.getContext('2d');
        context.drawImage(imgObj, 0, 0, iW, iH);
        var imgd = context.getImageData(0, 0, iW, iH);
        var data = imgd.data;
        for (br = 0; br < iBlurRate; br += 1) {
            for (var i = 0, n = data.length; i < n; i += 4) {
                iMW = 4 * iW;
                iSumOpacity = iSumRed = iSumGreen = iSumBlue = 0;
                iCnt = 0;
                // data of close pixels (from all 8 surrounding pixels)
                aCloseData = [
                    i - iMW - 4, i - iMW, i - iMW + 4, // top pixels
                    i - 4, i + 4, // middle pixels
                    i + iMW - 4, i + iMW, i + iMW + 4 // bottom pixels
                ];
                // calculating Sum value of all close pixels
                for (e = 0; e < aCloseData.length; e += 1) {
                    if (aCloseData[e] >= 0 && aCloseData[e] <= data.length - 3) {
                        iSumOpacity += data[aCloseData[e]];
                        iSumRed += data[aCloseData[e] + 1];
                        iSumGreen += data[aCloseData[e] + 2];
                        iSumBlue += data[aCloseData[e] + 3];
                        iCnt += 1;
                    }
                }
                // apply average values
                data[i] = (iSumOpacity / iCnt) * p1 + er;
                data[i + 1] = (iSumRed / iCnt) * p2 + eg;
                data[i + 2] = (iSumGreen / iCnt) * p3 + eb;
                data[i + 3] = (iSumBlue / iCnt);
            }
        }
        context.putImageData(imgd, 0, 0);
    }
    function resetToBlur1() {
        p1 = 1;
        p2 = 1;
        p3 = 1;
        er = eg = eb = 0;
        iBlurRate = 1;
        Blur();
    }
    // -- blur 2
    function resetToBlur2() {
        p1 = 1;
        p2 = 1;
        p3 = 1;
        er = eg = eb = 0;
        iBlurRate = 4;
        Blur();
    }
    // ------------------------- // blur ---------------------    

   };
 }(jQuery));

    <div class="cropped">
        <img id="croppedImg" src="03bc52c30e5eea81e4e816364fe4249a.jpg" alt=""/>
    </div>
    <div id="panel">
      <!-- viewable canvas -->
    </div>
  <input type="button" id="blur1" value="Blur1" />
  <input type="button" id="blur2" value="Blur2" />

   $("#blur1").click(function(){
           $("#panel").filter('blur1'); 
        });
   $("#blur2").click(function(){
           $("#panel").filter('blur2'); 
        });