Bodhi has no trees, and a mirror is not a platform.Theres nothing in the world, where to get dust!      下载   

js源码

截图功能需要依赖于canvas2image.js和html2canvas.js

首先在页面中引入这两个js，当然，如果你需要用到jq，同时还要引入jquery依赖

  $(".btn").click(function(){     var need = $("#need").get(0);     html2canvas(need, {        useCORS: true,          //允许跨域        allowTaint: false,       //允许跨域数据污染被污染的canvas        taintTest: true,        scale: 1                      //比例，越大分辨率越高，图片越小      }).then(function(canvas) {         // canvas宽度         var canvasWidth = $("#need").width();         // canvas高度         var canvasHeight = $("#need").height();             // 调用Canvas2Image插件             let w = $("#need").width(); //图片宽度             let h = $("#need").height();             // 将canvas转为图片             var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);             // var img = Canvas2Image.convertToJPEG(canvas, canvasWidth, canvasHeight)             $(".uploadImg").attr("src",img.src);// 渲染图片，并且加到页面中查看效果             // 保存             saveFile(img.src, richer.png);     });   })// 保存文件函数   var saveFile = function(data, filename){       var save_link = document.createElementNS(http://www.w3.org/1999/xhtml, a);       save_link.href = data;       save_link.download = filename;       var event = document.createEvent(MouseEvents);       event.initMouseEvent(click, true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);       save_link.dispatchEvent(event);   };

截取图片不能显示问题

在项目测试过程中，可能有的同学会遇到截取图片，截取成功后文字能显示，但是图片显示不出来的问题。这个问题我在上面的js中也有所标注，主要是跨域问题。

在你设置useCORS: true,为图，允许跨域的前提下，你的项目还要运行在环境中才能完全显示图片。环境中运行很重要，你可以在本地部署服务，或者放到一个线上的服务器中运行，这样测试，就是ok了，当然，后续你的项目放在正式环境中，那肯定也是ok的。

搬你想搬，盖你所需，码字不易，且行且珍惜！

健康食品 产品推荐 洗护测评 知识科普