网站公司怎么做运营,做招聘网站创业,跨越物流公司官网,网站html有了怎么建设网站今天给大家分享一下#xff0c;如何实现视频封面截取功能#xff0c;这里主要用到了 HTML5 的 canvas 相关的 api 和 js 相关的一些知识#xff0c;话不多说#xff0c;直接上代码#xff1a;
templatedivdiv classmargin-tb-sm如何实现视频封面截取功能这里主要用到了 HTML5 的 canvas 相关的 api 和 js 相关的一些知识话不多说直接上代码
templatedivdiv classmargin-tb-smbutton typeprimary clickcutImage请截取封面/button/divdiv classflex margin-top-smdiv classpadding-right-xsvideorefvideo:srcvideoUrlcontrolsloopstylemax-width: 200px;crossoriginanonymous /video!-- crossoriginanonymous 如果视频链接和你的项目不在一个域名下加上这个解决跨域 --/divdiv classpadding-left-xscanvas refcanvas styledisplay: none;/canvasimg v-showcoverImageBase64 :srccoverImageBase64 alt封面图 stylemax-width: 200px; refcoverImage //div/div/div
/template
script
export default {data() {return {coverImageBase64: , // 视频封面截图videoUrl: example.mp4 // 替换成你的视频地址}},methods: {cutImage() {this.$refs.video.pause()this.clearCanvas()this.capturePoster()},clearCanvas() {const canvas this.$refs.canvas // 获取canvas元素var ctx canvas.getContext(2d) // 获取2D渲染上下文ctx.clearRect(0, 0, canvas.width, canvas.height) // 重置画布尺寸清空画布},capturePoster() {const video this.$refs.videoconst canvas this.$refs.canvasconst ctx canvas.getContext(2d)canvas.width video.videoWidthcanvas.height video.videoHeightctx.drawImage(video, 0, 0, canvas.width, canvas.height)// toDataURL() 将画布上的所有内容包括绘制的图形、文本、图像等编码为一个 base64 编码的字符串const base64Data canvas.toDataURL(image/png)this.coverImageBase64 base64Data},base64ToBlob(base64Data, contentType) {const sliceSize 512// atob() 用于解码 Base64 编码字符串const byteCharacters atob(base64Data.split(,)[1])const byteArrays []for (let offset 0; offset byteCharacters.length; offset sliceSize) {const slice byteCharacters.slice(offset, offset sliceSize)const byteNumbers new Array(slice.length)for (let i 0; i slice.length; i) {byteNumbers[i] slice.charCodeAt(i)}const byteArray new Uint8Array(byteNumbers)byteArrays.push(byteArray)}return new Blob(byteArrays, { type: contentType })}}
}
/script知识点归纳
atob() 方法是一个非常实用的 JavaScript 内置函数可以轻松地处理 base-64 编码的数据
canvas.toDataURL() 是用于将 HTML5 canvas 元素的内容转换为一个数据 URLdata URL的方法。这个数据 URL 可以被用于在网页上直接显示图像或者在服务器端处理时作为图像数据的传输方式。
语法
var dataURL canvas.toDataURL(mimeType, quality);
参数
mimeType (可选): 指定输出图像的 MIME 类型。默认值是 image/png但你也可以指定其他格式如 image/jpeg。quality (仅用于 JPEG 格式可选): 指定图像的质量范围从 0.0最差质量文件最小到 1.0最佳质量文件最大。如果省略该参数则默认值为 0.92。
返回值
该方法返回一个包含完整 MIME 类型和 base64 编码数据的字符串。例如
data:image/png;base64,iVBORw0KG...
