如何使用Facebook应用程序上传base64图像?

时间:2016-03-17 11:51:16

标签: php facebook facebook-graph-api facebook-php-sdk

我有一个小的Facebook应用程序,用带有画布的网络摄像头捕捉照片。如何将图像发送到Feed facebook?该图片是png格式的日期网址。

我已经使用php sdk登录了。

capture.js

(function() {
var width = 640;    
var height = 0;  

var streaming = false;

var video = null;
var canvas = null;
var photo = null;
var startbutton = null;

function startup() {
  video = document.getElementById('video');
  canvas = document.getElementById('canvas');
  photo = document.getElementById('photo');
  startbutton = document.getElementById('startbutton');

  navigator.getMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);

navigator.getMedia(
  {
    video: true,
    audio: false
  },
  function(stream) {
    if (navigator.mozGetUserMedia) {
      video.mozSrcObject = stream;
    } else {
      var vendorURL = window.URL || window.webkitURL;
      video.src = vendorURL.createObjectURL(stream);
    }
    video.play();
  },
  function(err) {
    console.log("An error occured! " + err);
  }
);

video.addEventListener('canplay', function(ev){
  if (!streaming) {
    height = video.videoHeight / (video.videoWidth/width);

    if (isNaN(height)) {
      height = width / (4/3);
    }

    video.setAttribute('width', width);
    video.setAttribute('height', height);
    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);
    streaming = true;
  }
}, false);

startbutton.addEventListener('click', function(ev){
  takepicture();
  ev.preventDefault();
}, false);

clearphoto();
}

function clearphoto() {
  var context = canvas.getContext('2d');
  context.fillStyle = "#AAA";
  context.fillRect(0, 0, canvas.width, canvas.height);

  var data = canvas.toDataURL('image/png');
  photo.setAttribute('src', data);
}

function takepicture() {
  var context = canvas.getContext('2d');
  if (width && height) {
    canvas.width = width;
    canvas.height = height;
    context.drawImage(video, 0, 0, width, height);

    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
  } else {
    clearphoto();
  }
}
window.addEventListener('load', startup, false);
})();

的index.php

...
 <div class="camera">
   <video id="video">Video stream not available.</video>
   <button id="startbutton">Take photo</button> 
 </div>
 <canvas id="canvas">
 </canvas>
 <div class="output">
   <img id="photo" alt="The screen capture will appear in this box."> 
 </div>

0 个答案:

没有答案