Giters

topcss / my-notes

https://github.com/topcss/my-notes/issues/new

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

兼容 android 和 ios 的截取图片和视频的缩略图，用 js 客户端给视频抽帧

topcss opened this issue · comments

commented

另存为html文件，并分别在 android 和 iphone 中测试。可以实现，对选择图片和视频进行预览，和获取缩略图的功能。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      .hideMedia {
        visibility: hidden;
        height: 0;
        width: 0;
      }
      .preview {
        height: 100px;
        width: 100px;
      }
    </style>

    <script type="text/javascript">
      function getBase64Image(element) {
        var canvas = document.createElement('canvas')
        canvas.width = 100
        canvas.height = 100
        canvas
          .getContext('2d')
          .drawImage(element, 0, 0, canvas.width, canvas.height)

        return canvas.toDataURL('image/png')
      }

      function setImage() {
        let url = window.URL || window.webkitURL || window.mozURL

        let file = document.querySelector('#myFile').files[0]
        let src = url.createObjectURL(file)

        if (file.type.includes('video')) {
          // for video
          if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
            // for ios
            let img = document.querySelector('#myImg')
            img.src = src
          } else {
            // for android
            let video = document.querySelector('#hideVideo')

            video.src = src
          }
        } else if (file.type.includes('image')) {
          // for image
          let img = document.querySelector('#myImg')
          img.src = src
        }
      }

      // for android
      function video2img() {
        let video = document.querySelector('#hideVideo')

        document.querySelector('#myImg').src = getBase64Image(video)
      }

      function loadData() {
        let img = document.querySelector('#myImg')
        var data = getBase64Image(img)

        var img1 = document.createElement('img')
        img1.src = data
        document.body.appendChild(img1)
      }
    </script>
  </head>
  <body>
    <h3>兼容 android 和 ios 的截取图片和视频的缩略图</h3>
    <p>
      应用场景：基于微信浏览器开发H5程序时，在选择本地图片和视频后，要显示预览图。如果是视频就抽取第一帧，作为缩略图。<BR />
      差异：ios下canvas无法获取video的第一帧，却可以获取img标签的内容。而android正好相反。<BR />
      这个例程，兼容 android 和 ios 的截取图片和视频的缩略图
    </p>
    <div style="background-color: bisque">
      <img id="myImg" class="preview" />
      <video
        id="hideVideo"
        onloadeddata="video2img()"
        class="hideMedia"
      ></video>

      <input
        id="myFile"
        type="file"
        accept="image/*,video/*"
        onchange="setImage(this)"
      />
      <button onclick="loadData()">Get first frame</button>
    </div>
  </body>
</html>
commented

补充一下。现在ios系统中 已经可以直接将视频地址放在image标签上。就能实现缩略图了