摘要:前段时间做一个项目,需求是对每个视频添加预览图,这个问题最终选择方案是用来做转换获取视频的一个截图,添加到页面中,达到自动添加预览图的目的。
前段时间做一个项目,需求是对每个视频添加预览图,这个问题最终选择方案是:
用canvas.toDataYRL();来做转换获取视频的一个截图,添加到页面中,达到自动添加预览图的目的。
部分代码如下:
var testVideo = document.getElementById("my_video"); var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); var timer = setTimeout(function() { context.drawImage(testVideo, 0, 0, 640, 500); var imgURL = canvas.toDataURl("image/jpeg", 1.0); //测试一下 console.log(imgURL); }, 1000);
但是开发过程中遇到一个问题,在测试的时候总是提示:
Uncaught SecurityError: Failed to execute "toDataURL" on "HTMLCanvasElement": Tainted canvases may not be exported.
怎么修改都不起作用,最终发现:
这个其实是由于视频文件所在的域和图片和页面所在域不同,出现跨域传输的问题。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112167.html
摘要:前段时间做一个项目,需求是对每个视频添加预览图,这个问题最终选择方案是用来做转换获取视频的一个截图,添加到页面中,达到自动添加预览图的目的。 前段时间做一个项目,需求是对每个视频添加预览图,这个问题最终选择方案是:用canvas.toDataYRL();来做转换获取视频的一个截图,添加到页面中,达到自动添加预览图的目的。部分代码如下: var testVideo = document....
摘要:前段时间做一个项目,需求是对每个视频添加预览图,这个问题最终选择方案是用来做转换获取视频的一个截图,添加到页面中,达到自动添加预览图的目的。 前段时间做一个项目,需求是对每个视频添加预览图,这个问题最终选择方案是:用canvas.toDataYRL();来做转换获取视频的一个截图,添加到页面中,达到自动添加预览图的目的。部分代码如下: var testVideo = document....
摘要:微信长按保存失败微信安卓客户端长按保存编码格式的图片时,保存失败长按保存正常解决将编码给后台,后台处理成等常用格式的图片,返回图片保存的地址。 需求介绍 showImg(https://segmentfault.com/img/bVz3He); page2上的canvas可交互,并实时显示交互结果; 点击下一步,page2消失,page3显示; page3显示的是一张图片,图片有ca...
1. 安装依赖 npm i ngx-quill npm i quill ps:一定要安装 quill ,不然ngx-quill会报Cant resolve quill in xxxx, 因为ngx-quill内部引用了quill。 2. 使用 1. 引用 /* 在自己的`NgModule`的`imports`里面引用,我是在`RoutesModule`里引用的 */ import { Quil...
1. 安装依赖 npm i ngx-quill npm i quill ps:一定要安装 quill ,不然ngx-quill会报Cant resolve quill in xxxx, 因为ngx-quill内部引用了quill。 2. 使用 1. 引用 /* 在自己的`NgModule`的`imports`里面引用,我是在`RoutesModule`里引用的 */ import { Quil...
阅读 2219·2021-11-24 09:38
阅读 2942·2021-11-23 09:51
阅读 3251·2021-11-12 10:35
阅读 2774·2021-10-19 11:46
阅读 861·2021-08-03 14:03
阅读 2706·2021-06-11 18:08
阅读 2722·2019-08-29 13:52
阅读 2546·2019-08-29 12:49