資訊專欄INFORMATION COLUMN
摘要：前段時(shí)間做一個(gè)項(xiàng)目，需求是對(duì)每個(gè)視頻添加預(yù)覽圖，這個(gè)問題最終選擇方案是用來做轉(zhuǎn)換獲取視頻的一個(gè)截圖，添加到頁面中，達(dá)到自動(dòng)添加預(yù)覽圖的目的。
前段時(shí)間做一個(gè)項(xiàng)目，需求是對(duì)每個(gè)視頻添加預(yù)覽圖，這個(gè)問題最終選擇方案是：
用canvas.toDataYRL();來做轉(zhuǎn)換獲取視頻的一個(gè)截圖，添加到頁面中，達(dá)到自動(dòng)添加預(yù)覽圖的目的。
部分代碼如下：
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);
但是開發(fā)過程中遇到一個(gè)問題，在測試的時(shí)候總是提示：
Uncaught SecurityError: Failed to execute "toDataURL" on "HTMLCanvasElement": Tainted canvases may not be exported.
怎么修改都不起作用，最終發(fā)現(xiàn)：
這個(gè)其實(shí)是由于視頻文件所在的域和圖片和頁面所在域不同，出現(xiàn)跨域傳輸?shù)膯栴}。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88311.html
摘要：前段時(shí)間做一個(gè)項(xiàng)目，需求是對(duì)每個(gè)視頻添加預(yù)覽圖，這個(gè)問題最終選擇方案是用來做轉(zhuǎn)換獲取視頻的一個(gè)截圖，添加到頁面中，達(dá)到自動(dòng)添加預(yù)覽圖的目的。 前段時(shí)間做一個(gè)項(xiàng)目，需求是對(duì)每個(gè)視頻添加預(yù)覽圖，這個(gè)問題最終選擇方案是：用canvas.toDataYRL();來做轉(zhuǎn)換獲取視頻的一個(gè)截圖，添加到頁面中，達(dá)到自動(dòng)添加預(yù)覽圖的目的。部分代碼如下： var testVideo = document....
1. 安裝依賴 npm i ngx-quill npm i quill ps：一定要安裝 quill ，不然ngx-quill會(huì)報(bào)Cant resolve quill in xxxx, 因?yàn)閚gx-quill內(nèi)部引用了quill。 2. 使用 1. 引用 /* 在自己的`NgModule`的`imports`里面引用，我是在`RoutesModule`里引用的 */ import { Quil...
1. 安裝依賴 npm i ngx-quill npm i quill ps：一定要安裝 quill ，不然ngx-quill會(huì)報(bào)Cant resolve quill in xxxx, 因?yàn)閚gx-quill內(nèi)部引用了quill。 2. 使用 1. 引用 /* 在自己的`NgModule`的`imports`里面引用，我是在`RoutesModule`里引用的 */ import { Quil...
閱讀 1351·2023-04-25 15:21
閱讀 2684·2021-11-24 10:23
閱讀 3409·2021-10-11 10:59
閱讀 3255·2021-09-03 10:28
閱讀 1739·2019-08-26 13:45
閱讀 2329·2019-08-26 12:11
閱讀 929·2019-08-26 12:00
閱讀 1718·2019-08-26 10:44
