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

<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 @ 2017-03-01 14:04  AaronHuang  阅读(5164)  评论(0编辑  收藏  举报