利用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（）轉義后才能傳輸。