利用html2canvas截图,得到base64上传ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script type="text/javascript" src="js/html2canvas.js"></script>
 
//布局截图
$(function(){
//布局截图
function htmlCanvas(){
    html2canvas($(".J_screenshot"), {
            onrendered: function(canvas){
//            document.body.appendChild(canvas);
                var img = canvas.toDataURL();
                var base=encodeURIComponent(img);//转码
//              console.log(img); //在console中会输出图片的路径,然后复制在浏览器一粘贴,就可以看到。
                //上传截图
                ajaxUpLoad(base);
            },
//width:300,
//height:300
    });
};
function ajaxUpLoad(base){
    $.ajax({
        type: "POST",
        url: "",
        async: true,
        data: {base:base},
        dataType: "json",
        success: function (data) {
        },
        error: function (err) {
        }
    });
}
})

我们利用html2canvas的功能,得到了规定区域的页面截图,返回的是base64格式的图片,然后用ajax上传,要关注的点是base64要用encodeURIComponent()转义后才能传输。

posted @   AaronHuang  阅读(5176)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示