base 64 og：将图片分享到Facebook

Question

I am using this library to convert HTML to canvas. Then I am using the following code to get an image out of canvas:

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

As a result I get a base64 image. I need to use this image when sharing a post to Facebook. I know I need to add a meta tag og:image and insert the image there. But it doesn't want to accept a base64 image. Can anyone advise how I can do this?

Please help and thanks.

Answer 1

I solved this problem in such a way:

At first I convert HTML to canvas, then canvas to image and afterwards this image is drawn with canvas for cropping the initial image to get rid of extra space. After this is done, the image is sent to the server for storage and passed to FB in og:image meta tag.

$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