js-html2canvas.js实现页面截图并显示或上传

一、js插件引入

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

二、js将需要的标签中的内容做canvas渲染后输出base64图，#xxx是需要渲染的内容

html2canvas($("#xxx"), {
    // 是否尝试使用CORS从服务器加载图像
    useCORS: true,
    // 截取当前的宽高
    width: $("#xxx").width(),
    height: $("#xxx").height(),
    windowWidth: document.body.scrollWidth,
    windowHeight: document.body.scrollHeight,
    x: 0,
    y: 0,
    onrendered: function (canvas) {
        var url = canvas.toDataURL("image/png");
        console.log(url);
    }
    // 背景图设置-默认是透明的
    background:"#fafafa"

});

 

说明：html2canvas(参数1, 参数2)，

参数1是你要截取的那个元素，比如你要截取一个id为myId的div，只需在参数1处填入$("#myId")或者document.getElementById("myId")即可；

参数2则是处理逻辑，是一个对象，对象中有一个key为onrendered，它的value是一个function，在这个function中可以执行你需要的操作，比如截图的格式（image/png就是png格式的），除了onrendered还可以使用如background背景等作为对象的key，具体可参考html2canvas的api

 

遇到输出报错例如：Not allowed to navigate top frame to data URL: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAK

可能图片跨域问题，可以在服务器环境下工作，或者将图片改完base64测试。

 

html2canvas转canvas后,部分iphone手机机型出现空白.
测试的机型及结果:
1.iphoneX 系统11.3.1 空白
2.iphone6p 系统9 空白
3.iphone6s 系统11.3 正常
4.iphone6 系统12 正常
5.安卓 系统7 正常
6.iphone7 ios11 空白

解决方式：

html2canvas的方法中需要重新定义下宽，高 和 和x，y的位置。如上代码

 

vue中跨域生成的图片截图后上述操作依旧失效

则将图片转成base64

var img = res.url;//imgurl 就是你的图片路径  
        function getBase64Image(img) {  
             var canvas = document.createElement("canvas");  
             canvas.width = img.width;  
             canvas.height = img.height;  
             var ctx = canvas.getContext("2d");  
             ctx.drawImage(img, 0, 0, img.width, img.height);  
             var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  
             var dataURL = canvas.toDataURL("image/"+ext);  
             return dataURL;  
        }
        var image = new Image();  
        image.setAttribute('crossOrigin', 'anonymous');
        image.src = img;  
        image.onload = function(){  
          var base64 = getBase64Image(image);  
          console.log(base64);  
          _this.apiURL = base64    // 输出渲染
        } 

 

相关api参数：http://html2canvas.hertzen.com/configuration/