html2canvas图片模糊_Vue利用html2canvas实现下载网页截图

官网 http://html2canvas.hertzen.com/

安装 npm install --save html2canvas

使用(自带解决图片模糊的问题)

//id dom的id     name 下载图片的名称downloadCard(id, name) {      var copyDom = document.getElementById(id); //要保存的dom      var width = copyDom.offsetWidth; //dom宽      var height = copyDom.offsetHeight; //dom高      var scale = 2; //放大倍数      html2canvas(copyDom, {        dpi: window.devicePixelRatio * 2,        scale: scale,        width: width,        heigth: height,        useCORS: true // 【重要】开启跨域配置      }).then(function(canvas) {        var context = canvas.getContext("2d");        // 【重要】关闭抗锯齿        context.mozImageSmoothingEnabled = false;        context.webkitImageSmoothingEnabled = false;        context.msImageSmoothingEnabled = false;        context.imageSmoothingEnabled = false;        var url = canvas.toDataURL();        var triggerDownload = $("")          .attr("href", url)          .attr("download", name + ".png")          .appendTo("body");        triggerDownload[0].click();        triggerDownload.remove();      });    }

效果：

奥利给了