Javascript 如何使用画布重画修改后的图像

让我给你解释一下我是干什么的。我需要画一幅接近5000px到2688px的bigg图像。所以我无法绘制整个图像，因为在浏览器中它太长了。我决定添加滚动条来查看整个图像。下面的脚本允许我绘制画布的一部分

var img = new Image();
     img.onload = function(){
          canvasW = 5376
          canvasH = 2688
          ctx.drawImage(img, 0,0, canvasW, canvasH);
     };
img.src = "image.png";

现在想象一下，如果我想应用模糊或亮度、对比度等效果，我的画布将发生变化，那么我如何重新绘制修改过的画布（效果而不是第一个）

我试图检查stackoverflow，但示例是从第一张图片中重新绘制图片。我的意思是，该图片不是来自修改过的画布

我尝试存储画布的base64并使用base64重新绘制：

var image = new Image()

    image.addEventListener('load', function() {
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    ctx.drawImage(image, canMouseX, canMouseY, canvasW, canvasH);

})

image.src = bases64[bases64.length - 1]

它不起作用，因为通过存储base64，画布中只有一部分被重新绘制。如果您需要更多详细信息，请在以下位置克隆我的回购：

---

我想找到一个解决方案来重新绘制修改后的画布

您正在谈论css效果，例如

模糊（10px）

或

亮度（0.1）

？不，我使用的是类似画布的stackblur库而不是CSW的模糊，当您从鼠标位置绘制图像时（

canMouseX，canMouseY

）。这就是为什么画布上只有一部分被重画。试着用

0,0

替换

canMouseX，canMouseY

。这是我想画画布的一部分的目标，但如何重画通过模糊修改的画布的一部分？你明白我的问题吗？看看我的第二部分代码，我想用图像模糊代替basic图像，因此我加载另一个图像作为代码的第二部分，但src是base64，它只包含我图像的一部分，而不是整个图像。您正在谈论css效果，例如

模糊（10px）

或

亮度（0.1）

？不，我使用的是类似画布的stackblur库中的模糊，而不是CSW。当您从鼠标位置绘制图像时（

canMouseX，canMouseY

）。这就是为什么画布上只有一部分被重画。试着用

0,0

替换

canMouseX，canMouseY

。这是我想画画布的一部分的目标，但如何重画通过模糊修改的画布的一部分？你明白我的问题吗？看看我的第二部分代码，我想用图像模糊代替basic映像，所以我加载另一个映像作为代码的第二部分，但是src是base64，它只包含我映像的一部分而不是整个映像