如何使用fb.api保存画布图像并分享到Facebook

时间:2014-04-01 11:13:08

标签: c# javascript jquery html2canvas

我想将画布图像保存到文件夹,并在Facebook上使用html2canvas插件记录我在用户墙上分享,但我的问题是div元素没有在画布中绘制,div中的数据是来自数据库以下是我写的代码。

HtmlCode:

<div class="fan_wrap">
         <ul class="fan_list">
                <% foreach (ProfileDetails currentFollowers in AllFollowers)
                  {
                  %>
  <li <%if (currentFollowers.ID != 0) { Response.Write("class=\"locate\""); } %>>
  <img src="<%=currentFollowers.ProfileImg %>" alt="<%=currentFollowers.Name %>" title="<%=currentFollowers.Name %>" />
   <div class="frame"></div>
     </li>
     <%} %>
   </ul>
    <div class="clearfix"></div>
    <div class="logo_water_mark">
    <img src="images/trans_logo.png" alt="" />
     </div>
    </div>

Javascript代码:

  $(document).ready(function () {
      $('#share_lnk').on('click',function () {
            html2canvas($('.fan_wrap'), {
                onrendered: function (canvas) {
                   var image = canvas.toDataURL("image/jpeg");
                    var url = canvas.toDataURL("image/jpeg");
                    image = image.replace('data:image/jpeg;base64,', '');
                    $.ajax({

                        type: 'POST',
                        url: 'FacebookLogin.aspx/UploadImage',
                        data: '{ "imageData" : "' + image + '" }',
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        success: function (msg) {
                            alert('Image saved successfully !');
                        }
                    });
                    var newImg = document.createElement("img");
                    newImg.src = url;
                    document.body.appendChild(newImg);
                }
            });
        });
    });

1 个答案:

答案 0 :(得分:0)

首先,您必须将画布图像保存在您想要共享的域中,因为您的Facebook应用程序仅支持一个。接下来你可以像下面一样分享图片的网址:

FB.ui({
                                method: 'feed',
                                name: "some name",
                                link: "somelink.com",
                                picture: urltobeshared,
                                caption: 'some caption',
                                description: "some descrtiption",
                              },
                              function(response) {
                                if (response && response.post_id) {
                                  console.log('Thank you');
                                }                  
                              }
                        );
                    },

docs here。希望有所帮助