canvas.toDataURL('image/png')報錯處理方法

vpants 發布于2019-08-29 12:49 / 2743人閱讀

摘要：前段時間做一個項目，需求是對每個視頻添加預覽圖，這個問題最終選擇方案是用來做轉換獲取視頻的一個截圖，添加到頁面中，達到自動添加預覽圖的目的。

前段時間做一個項目，需求是對每個視頻添加預覽圖，這個問題最終選擇方案是：
用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.
怎么修改都不起作用，最終發現：
這個其實是由于視頻文件所在的域和圖片和頁面所在域不同，出現跨域傳輸的問題。

GPU云服務器云服務器 attr&039&039checked&039&039 given&039&039 php游戲代碼&039&039 java好學嗎&039&039

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112167.html

canvas.toDataURL(&#039;image/png&#039;)報錯處理方法

摘要：前段時間做一個項目，需求是對每個視頻添加預覽圖，這個問題最終選擇方案是用來做轉換獲取視頻的一個截圖，添加到頁面中，達到自動添加預覽圖的目的。前段時間做一個項目，需求是對每個視頻添加預覽圖，這個問題最終選擇方案是：用canvas.toDataYRL();來做轉換獲取視頻的一個截圖，添加到頁面中，達到自動添加預覽圖的目的。部分代碼如下： var testVideo = document....

idisfkj 2019-08-21 15:55 評論0 收藏0
angular引入富文本ngx-quill，自定義圖片上傳（解決Can&#039;t resolve

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...

willin 2019-08-02 15:30 評論0 收藏0
angular引入富文本ngx-quill，自定義圖片上傳（解決Can&#039;t resolve

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...

honmaple 2019-08-23 18:35 評論0 收藏0