[jQuery]html2canvas 網頁轉換成canvas搭配分享至臉書

官方網站: http://html2canvas.hertzen.com/

介紹: 將整張網頁或局部元素轉為HTML5 Canvas

使用方式: 

1. 抓取table並轉成圖片

html2canvas($("table")[0], {

        onrendered: function(canvas) {

          var $div = $("fieldset div");

          $div.empty();

          $("<img />", { src: canvas.toDataURL("image/png") }).appendTo($div);

        }

      });

2. 整個頁面轉成圖片

html2canvas(document.body, {

  onrendered: function(canvas) {

    document.body.appendChild(canvas);

  }

});

搭配分享至臉書

$(".FBShare").click(function () {
        $.ajaxSetup({
            cache: true
        });
        // 取得臉書提供API
        $.getScript('//connect.facebook.net/en_UK/all.js', function () {
            // Load the APP / SDK
            FB.init({
                appId: '你申請的服務ID', // App ID from the App Dashboard
                cookie: true, // set sessions cookies to allow your server to access the session?
                status: true, // check the login status upon init?
                xfbml: true, // parse XFBML tags on this page?
                frictionlessRequests: true,
                oauth: true
            });
            FB.login(function (response) {
                if (response.authResponse) {
                    window.authToken = response.authResponse.accessToken;
                    // 網頁轉圖片分享至臉書
                    PostImageToFacebook(window.authToken);
                } else {
                }
            }, {
                scope: 'publish_actions,publish_stream'
            });
        });
     
    });
});
// 網頁轉圖片分享至臉書
function PostImageToFacebook(authToken) {
    // 網頁轉cnavas圖片
    html2canvas(document.body, {
        onrendered: function (canvas) {
            var imageData = canvas.toDataURL("image/png");
            try {
                // url轉base64
                blob = dataURItoBlob(imageData);
            } catch (e) {
                console.log(e);
            }
            // 分享至臉書
            var fd = new FormData();
            fd.append("access_token", authToken);
            fd.append("source", blob);
            fd.append("message", "這是一個測試臉書分享圖片功能");
            try {
                $.ajax({
                    url: "https://graph.facebook.com/me/photos?access_token=" + authToken,
                    type: "POST",
                    data: fd,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (data) {
                        console.log("success " + data);
                        $("#poster").html("Posted Canvas Successfully");
                        alert("以分享至臉書，請至臉書查看最新消息!!");
                    },
                    error: function (shr, status, data) {
                        console.log("error " + data + " Status " + shr.status);
                    },
                    complete: function () {
                        console.log("Posted to facebook");
                    }
                });

            } catch (e) {
                console.log(e);
            }
        }
    });
}
// Convert a data URI to blob
function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], {
        type: 'image/png'
    });
}