css滤镜图片的原样生成

现在需要对一个复杂滤镜的图片进行保存，使这个图片能保留滤镜的效果。

原理很简单，就是在原来image的基础上，新建一个canvas，然后增加滤镜效果，画出这个图片，最后保存这个图片到本地。

js代码简单版本（未实现批量）
`

<script>
    const originalImage = document.getElementById('originalImage');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    originalImage.onload = function() {
        canvas.width = originalImage.width;
        canvas.height = originalImage.height;

        ctx.filter = 'brightness(0.9) contrast(1.3) grayscale(1) hue-rotate(140deg) opacity(1) saturate(1) sepia(1) invert(1)';
        ctx.drawImage(originalImage, 0, 0);

        const filteredImageUrl = canvas.toDataURL('image/png');

        // 创建一个新的图片元素来显示处理后的图片
        const filteredImage = new Image();
        filteredImage.src = filteredImageUrl;

        // 将处理后的图片添加到页面中
        document.body.appendChild(filteredImage);
    };

    originalImage.src = "image_path.jpg";
</script>