前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用H5的video标签播放视频,拍照保存和上传

使用H5的video标签播放视频,拍照保存和上传

作者头像
张云飞Vir
发布2021-04-27 16:25:22
2K0
发布2021-04-27 16:25:22
举报
文章被收录于专栏:写代码和思考

播放视频

HTML <video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放

代码语言:javascript
复制
<video controls width="250">

    <source src="/media/cc0-videos/flower.webm"
            type="video/webm">

    <source src="/media/cc0-videos/flower.mp4"
            type="video/mp4">

    Sorry, your browser doesn't support embedded videos.
</video>

对视频截图(拍照)

通过canvas 来对正在视频截图,即在 canas 上绘制 video 标签内的视频图像,然后 使用 canvas.toDataURL() 方法输出 base64 文本描述的图像。

canvas.toDataURL() 方法返回一个包含图片展示的 data URI 。默认为 PNG 格式。图片的分辨率为96dpi。文本以“data:image/png”开头

代码语言:javascript
复制
        var canvas = document.createElement("canvas");
        canvas.width = video.videoWidth * scale;
        canvas.height = video.videoHeight * scale;
        canvas.getContext('2d')
           .drawImage(video, 0, 0, canvas.width, canvas.height);
        var img = document.createElement("img");
        //console.log(canvas.toDataURL());
        //方法返回一个包含图片展示的 data URI 。默认为 PNG 格式。图片的分辨率为96dpi
        img.src = canvas.toDataURL();
        $output.prepend(img);

将对视频拍照的图片保存到本地

简单来说就是创建一个隐藏的link 标签,补充它的属性,在点击它。

代码语言:javascript
复制
        //下面是保存到 本地的方法
        var link = document.getElementById('link');
        link.setAttribute('download', 'img_.png');
        link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
        link.click();

将拍照后的base64 图片上传到后台

前端代码如下:

代码语言:javascript
复制
  //下面是 上传的方法
        //删除字符串前的提示信息 "data:image/png;base64,"
        var data = canvas.toDataURL();
        var img_base64 = data.substring(22);
        $.ajax({type:"POST", url: "/uploadfile", data: { data: img_base64, name: 'file' }, success:
             function (){
               $output.prepend("upload done!");
             }
         });
      };

接收图片的后端代码

代码语言:javascript
复制
/**
 * @description:
 * @author: zhangyunfei
 * @date: 2021/4/25 19:22
 */
@RestController
@RequestMapping()
public class UploadFileController {
    public static final String IMAGE_STORE_DIR = "/Users/zhangyunfei/Downloads/video/public";
    private static final String TAG = UploadFileController.class.getSimpleName();

    @PostMapping(value = "/uploadfile", name = "接收上传文件")
    public String cleanAlarm(String name, String data) {
        LogUtil.d(TAG, "name=%s, data=%s", name, data);
        saveFile(data);
        return "ok";
    }

    private void saveFile(String data) {
        try {
            Base64.Decoder decoder = Base64.getDecoder();
            byte[] bytes1 = decoder.decode(data);
            String fileName = UUID.randomUUID().toString() + ".png";
            File path = new File(IMAGE_STORE_DIR, fileName);
            FileOutputStream writer = new FileOutputStream(path);
            writer.write(bytes1);
            writer.close();
            LogUtil.d(TAG, "## 保存文件成功,路径=%s", path.getPath());
        } catch (IOException e) {
            e.printStackTrace();
            LogUtil.d(TAG, "## 保存文件失败,%s", e);
        }
    }

附录

补充:准备一个mp4的视频源 后端采用java实现,首先准备一个 mp4 的视频文件。新建一个springboot 工程,将 某个文件夹映射为静态资源目录,代码如下。

代码语言:javascript
复制
@Configuration
public class ResourceConfig {
    private static final String TAG = "## ResourceConfig";

    // 图片URL 路径映射的 根
    public static final String IMAGE_PATH_PATTERNS = "/img";
    public static final String IMAGE_STORE_DIR = "/Users/zhangyunfei/Downloads/video/public";

    public ResourceConfig() {
        LogUtil.d(TAG, "instance !");
    }

    @Bean
    public WebMvcConfigurer resourceConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addResourceHandlers(ResourceHandlerRegistry registry) {
                // 将整个 img 文件配置成静态资源
                String pathPatterns = IMAGE_PATH_PATTERNS + "/**";
                String locations = "file:" + IMAGE_STORE_DIR + "//";
                registry.addResourceHandler(pathPatterns)
                        .addResourceLocations(locations);

                LogUtil.d(TAG, "## 静态资源路径映射:%s --> %s", pathPatterns, locations);
            }
        };
    }
}

补充:最后贴出完整的前端代码

代码语言:javascript
复制
<html>
<head>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

  <script type="text/javascript">

    $(document).ready(function(){
      let $output, video;
      let scale = 1;// 控制 图片的缩放比率

      var initialize = function() {
        $output = $("#output");
        video = $("#video").get(0);
        $("#capture").click(captureImage);
      };

      var captureImage = function(){
        console.log("video.videoWidth=%s, video.videoHeight=%s",video.videoWidth,video.videoHeight)

        var canvas = document.createElement("canvas");
        canvas.width = video.videoWidth * scale;
        canvas.height = video.videoHeight * scale;
        canvas.getContext('2d')
           .drawImage(video, 0, 0, canvas.width, canvas.height);
        var img = document.createElement("img");
        //console.log(canvas.toDataURL());
        //方法返回一个包含图片展示的 data URI 。默认为 PNG 格式。图片的分辨率为96dpi
        img.src = canvas.toDataURL();
        $output.prepend(img);

        //下面是保存到 本地的方法
        //var link = document.getElementById('link');
        //link.setAttribute('download', 'img_.png');
        //link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
        //link.click();

        //下面是 上传的方法
        //删除字符串前的提示信息 "data:image/png;base64,"
        var data = canvas.toDataURL();
        var img_base64 = data.substring(22);
        $.ajax({type:"POST", url: "/uploadfile", data: { data: img_base64, name: 'file' }, success:
             function (){
               $output.prepend("upload done!");
             }
         });
      };

      initialize();

    });
  </script>
</head>

<body>
    <video id="video" controls autoplay>
      <source src="http://localhost:8080/img/hmbb.mp4"/>
       您的浏览器不支持 video 标签。
    </video>
    <p/>
    <button id="capture">Capture</button>
    <div id="output"></div
    <!-- 故意不显示这个按钮 -->
    <a id="link" style="display:none">保存图片</a>
</body>

</html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 播放视频
  • 对视频截图(拍照)
  • 将对视频拍照的图片保存到本地
  • 将拍照后的base64 图片上传到后台
  • 附录
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档