首页 >  html代码 >  html2canvas如何实现滤镜效果

html2canvas如何实现滤镜效果

时间：2024-01-01

html2canvas是一款截图js插件，可以很方便的对某些区域进行截图。但是有一个缺陷，那就是不支持滤镜图片filter效果（还包括其他一些CSS3效果），这是当前插件的一个小缺点。

一、解决

目前的一个解决方案是利用canvas来先实现滤镜效果，然后重新渲染。整体思路是将设置过滤镜的图片进行canvas重新画图，然后再通过html2canvas截图，分为2步；

html2canvas插件截图还是挺好用的，不考虑更换的话，可以通过这个折中的办法达到效果

setNewImg(element){

      let img = new Image();

      img.src = element.src;

      img.onload = () => {

         let width = img.width;

         let height = img.height;

         const canvas = document.createElement("canvas");

         const ctx = canvas.getContext("2d");

         canvas.width = width;

         canvas.height = height;

        if (element.filterBlur) {//标记，判断是进行哪种滤镜，当前只判断了模糊和灰色滤镜，可以增加其他滤镜

            ctx.filter = "blur(" + element.filterBlur + "px)";//模糊滤镜

        } else {

           ctx.filter = "grayscale(" + element.grayscale + "%)";//灰色滤镜

       }

      ctx.drawImage(img, 0, 0, width, height);

      element.filertsrc= canvas.toDataURL();//将生成的滤镜图片返回，必要时候使用

   }

};