Question

我有一些脚本从视频的第一帧获取图像并返回base64image编码。

然后我将此图像发布到服务器后端以保存到上传目录..

它在桌面上的chrome上工作正常，但是当我在iPhone7 IOS10 Safari上测试它不起作用。

我曾尝试同时使用blob和base64image，但在iOS上都无法工作，两者都可以在Chrome桌面上运行。

这是我目前用来获取图片的javascript ..

$('#upload').bind('change', function(event) {
        console.log("input");
  var file = event.target.files[0];
  var fileReader = new FileReader();
  if (file.type.match('image')) {
    fileReader.onload = function() {
      var img = document.createElement('img');
      img.src = fileReader.result;
      document.getElementsByTagName('div')[0].appendChild(img);
    };
    fileReader.readAsDataURL(file);
  } else {
    fileReader.onload = function() {
      var blob = new Blob([fileReader.result], {type: file.type});
      var url = URL.createObjectURL(blob);
      var video = document.createElement('video');
      var timeupdate = function() {
        if (snapImage()) {
          video.removeEventListener('timeupdate', timeupdate);
          video.pause();
        }
      };
      video.addEventListener('loadeddata', function() {
        if (snapImage()) {
          video.removeEventListener('timeupdate', timeupdate);
        }
      });
      var snapImage = function() {
        var canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        var image = canvas.toDataURL(); // Base64Image source

        var success = image.length > 100000;
        if (success) {
          var img = document.createElement('img');
          img.src = image;
          document.getElementsByTagName('div')[0].appendChild(img);
          URL.revokeObjectURL(url);

           $.ajax({
    url : "uploadApi.php",
    type: "POST",
    data : {"videoThumb" : image},
    success: function(data)
    {
        alert(data);
    },
    error: function (data)
    {
 alert(data);
    }
});

          console.info("image");
          $('#b64image').val(image);
        }
        return success;
      };
      video.addEventListener('timeupdate', timeupdate);
      video.preload = 'metadata';
      video.src = url;
      // Load video in Safari / IE11
      video.muted = true;
      video.playsInline = true;
      video.play();
    };
    fileReader.readAsArrayBuffer(file);
  }
});

uploadApi.php

var_dump($_POST["videoThumb"];
    $data = $_POST["videoThumb"];
    $videoId = 1;

            list($type, $data) = explode(';', $data);
            list(, $data)      = explode(',', $data);
            $data = base64_decode($data);

            $fileDirSrc = "../thumbs/"vid_".$videoId."_videoThumb.png";
            $fileDirSrcNoTrailingDots = "vid_".$videoId."_videoThumb.png";

         file_put_contents($fileDirSrc, $data);

Wierdly，ajax响应在桌面上时会在警报中返回base64image的转储。但在iOS Safari中，它会返回 [object Object]

您可以尝试将视频上传到他的js小提琴，首先从http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5获取mp4视频文件。

https://jsfiddle.net/jvftb0gt/2/

无法在IOS / Safari上发布Base64Image

0 个答案: