用style.filter给图片加了滤镜，为什么下载下来还是没有滤镜的图片

Question

问题遇到的现象和发生背景

用style.filter给图片加了滤镜，为什么下载下来还是没有滤镜的图片

用代码块功能插入代码，请勿粘贴截图

function changeFilter() {
        var select = document.getElementById("filter"); //获取select
        var index = select.selectedIndex; //获取select的选中项的索引
        var value = select.options[index].value; //获取select的选中项的值
        if (value == 'none') { //如果选中项的值为none，就显示原图
            $yulan.style.filter = 'none';
        } else if (value == 'blur') { //如果选中项的值为blur，就显示模糊滤镜
            $yulan.style.filter = 'blur(5px)';
        } else if (value == 'grayscale') { //如果选中项的值为grayscale，就显示灰度滤镜
            $yulan.style.filter = 'grayscale(100%)';
        } else if (value == 'sepia') { //如果选中项的值为sepia，就显示褐色滤镜
            $yulan.style.filter = 'sepia(100%)';
        } else if (value == 'invert') { //如果选中项的值为invert，就显示反色滤镜
            $yulan.style.filter = 'invert(100%)';
        }
        //将加了滤镜的图片下载
        var a = document.createElement('a'); //创建a标签
        a.href = $yulan.src; //a标签的href为预览图片的src
        a.download = 'download'; //a标签的download为download
        a.click(); //点击a标签
    }

Answer 1

可以考虑调整完毕后用html2canvas截图
参考：https://blog.csdn.net/tuzi007a/article/details/122723196