Question

请让我解释一下我的工作。我需要在接近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，只有一部分画布被重画。如果您想了解更多详细信息，请克隆我的存储库：https://github.com/wyllisMonteiro/draggingScroll/tree/master

我想找到一种方法来重新绘制修改后的画布

如何使用画布重新绘制修改后的图像

0 个答案: