利用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()转义后才能传输。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM