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

播放视频

HTML



对视频截图(拍照)

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

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

        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 标签,补充它的属性,在点击它。

        //下面是保存到 本地的方法
        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 图片上传到后台

前端代码如下:

  //下面是 上传的方法
        //删除字符串前的提示信息 "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!");
             }
         });
      };

接收图片的后端代码

/**
 * @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);
        }
    }


附录

  • 示例说明地址:https://www.jianshu.com/p/75b20f7668b3
  • 示例代码地址:https://github.com/vir56k/demo/blob/master/video2/public/index3.html

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

@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);
            }
        };
    }
}

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



  

  



    
    

你可能感兴趣的:(示例:使用H5的video标签播放视频,拍照保存和上传)