在Facebook上分享畫布

我有一個網站，用戶可以在其中設計智能手機套。用戶應該能夠在Facebook上分享設計，包括設計。我有這個對象，還有一個'style'被設置爲畫布的數據URI。在Facebook上分享畫布

自定義圖像的代碼，同時共享：

我怎麼會去與我的形象分享它，因爲它是一個數據URI。

感謝

UPDATE：我現在已經在服務器上保存下來的帆布，正確鏈接。雖然，我似乎無法編輯鏈接Facebook的「href」閱讀縮略圖。

我嘗試：

變種fblink =的document.getElementById（「facebook_share」）; fblink.href =「http://example.com/image.png」;

AND

fblink.setAttribute（的「href」，「http://example.com/image.png」）;

似乎沒有工作。 'fblink'對象是正確的，因爲我可以讀'rel'等。

來源

2012-11-13 Emil

是節約畫布數據到服務器，圖像（以及使用該網址）不是一種選擇？ – MassivePenguin

我實際上在看我們如何做到這一點。任何建議？ – Emil

您是否嘗試過這種方法：http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/（您可能會遇到的最大問題是跨服務器安全 - 您需要確保你的圖像保存在服務於你的Canvas和javascript的同一臺機器上） – MassivePenguin

我個人使用canvas.toDataURL()，它生成一個base64編碼的畫布內容URL。

之後，我使用下面的命令Base64Binary.decode(encodedPng)

一旦你有你的解碼圖像，你可以把它放在一個表格併發送所有通過XMLHttpRequest對象解碼的URL，如下面的代碼指定：

  // Random boundary defined to separate element in form 
      var boundary = '----ThisIsTheBoundary1234567890'; 

      // this is the multipart/form-data boundary we'll use 
      var formData = '--' + boundary + '\r\n'; 
      formData += 'Content-Disposition: form-data; name="source"; filename="' + filename + '"\r\n'; 
      formData += 'Content-Type: ' + mimeType + '\r\n\r\n'; 

      // let's encode our image file 
      for (var i = 0; i < imageData.length; ++i) { 
       formData += String.fromCharCode(imageData[ i ] & 0xff); 
      } 

      formData += '\r\n'; 
      formData += '--' + boundary + '\r\n'; 
      formData += 'Content-Disposition: form-data; name="message"\r\nContent-Type: text/html; charset=utf-8\r\n\r\n'; 
      formData += message + '\r\n' 
      formData += '--' + boundary + '--\r\n'; 

      // Create a POST XML Http Request 
      var xhr = new XMLHttpRequest(); 
      xhr.open('POST', 'https://graph.facebook.com/me/photos?access_token=' + authToken, true); 
      // Call back function if POST request succeed or fail 
      xhr.onload = xhr.onerror = function() { 
       if (!(xhr.responseText.split('"')[1] == "error")) { 
        // If there is no error we redirect the user to the FB post she/he just created 
        var userID = xhr.responseText.split('"')[7].split('_')[0]; 
        var postID = xhr.responseText.split('"')[7].split('_')[1]; 
        w = window.open('https://www.facebook.com/'+userID+'/posts/'+postID, 
          'width=1235,height=530'); 
       } 
       else { 
        alert("Erreur: "+xhr.responseText); 
       } 
      }; 
      xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary); 

      // Attach the data to the request as binary 
      xhr.sendAsBinary(formData);

你可以看到我的Github project一個完整的工作示例文件中maskToFb.html

來源

2014-09-17 22:54:04 Gregriggins36

在Facebook上分享畫布

回答

相關問題