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

最新推荐文章于 2023-10-08 17:17:12 发布

dianni7443

最新推荐文章于 2023-10-08 17:17:12 发布

阅读量414

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/AaronNotes/p/6483988.html

版权

<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（）转义后才能传输。

转载于:https://www.cnblogs.com/AaronNotes/p/6483988.html