base 64 og：图像到 facebook 共享答案

【问题标题】：base 64 og:image to facebook sharebase 64 og：图像到 facebook 共享
【发布时间】：2014-10-29 12:24:22
【问题描述】：

我正在使用library 将 HTML 转换为画布。然后我使用以下代码从画布中获取图像：

canvas = document.getElementsByTagName('canvas')[0] context = canvas.getContext('2d') image = new Image() image.src = canvas.toDataURL("image/png")

结果我得到了一个 base64 图像。在将帖子分享到 Facebook 时，我需要使用此图像。我知道我需要添加一个元标记og:image 并在其中插入图像。但它不想接受 base64 图像。谁能建议我如何做到这一点？

请帮忙，谢谢。

【问题讨论】：

标签： facebook image canvas base64 javascript

【解决方案1】：

我是这样解决这个问题的：

首先，我将 HTML 转换为画布，然后将画布转换为图像，然后使用画布绘制此图像，以裁剪初始图像以消除多余的空间。完成后，图像被发送到服务器进行存储，并在 og:image 元标记中传递给 FB。

$scope.facebookShared = () ->

      $window.open "//www.facebook.com/sharer/sharer.php?u=" + encodeURI($location.absUrl()), "sharer", "toolbar=0,status=0,width=" + 500 + ",height=" + 500 /// this is window for share fb

      height=$('.sharing').height()
      html2canvas document.body,
        onrendered: (canvas) ->

          context = canvas.getContext('2d')
          image = new Image()
          image.src = canvas.toDataURL("image/png")
          image.onload = ->
            sharing=$('.sharing')
            canvas.height = Math.round(sharing.width()/1.91)
            canvas.width = sharing.width()

            context=canvas.getContext('2d')

            pos =  sharing.parent(0).parent(0).position()
            context.drawImage(this, pos.left, pos.top, sharing.width() + 20, sharing.height(),0,0,sharing.width()+20,sharing.height())

            $.ajax
              url: '../../save_img'
              type: 'post'
              beforeSend: (xhr) ->
                xhr.setRequestHeader "X-CSRF-Token", $("meta[name=\"csrf-token\"]").attr("content")
                return
              data:
                base64_image: canvas.toDataURL("image/png").replace(/^data:image\/(png|jpg);base64,/, "")
                claim_slug: $scope.claim.slug

            return false

        width: $('.claim-page ').width()
        height: height+115

      return

【讨论】：