canvas.toDataURL image/png エラー処理方法の推奨

canvas.toDataURL image/png エラー処理方法の推奨

問題の背景:

再生中のビデオのスクリーンショットを撮る必要があります。ビデオはビデオタグを使用して再生され、ビデオ再生領域をクリックするとリアルタイムのフレーム画像がキャプチャされます。

コードは次の通り非常にシンプルです:

JavaScriptコードコンテンツをクリップボードにコピー
  1. varビデオ = document.getElementById( 'ビデオ' );
  2.   
  3. varキャンバス = document.getElementById( 'キャンバス' );
  4.   
  5. var ctx = canvas.getContext( '2d' );
  6.   
  7. var img = document.getElementById( 'img' );
  8.   
  9. 関数スナップショット() {
  10. ctx.drawImage(ビデオ,0,0);
  11. img.src = canvas.toDataURL( 'image/png' );
  12. }
  13.   
  14. video.addEventListener( 'click' 、スナップショット、 false );

質問:

キャッチされない SecurityError: 'HTMLCanvasElement' で 'toDataURL' を実行できませんでした: 汚染されたキャンバスはエクスポートできない可能性があります。

確認と分析の結果、これは実際にはビデオファイルが配置されているドメインと、画像やページが配置されているドメインが異なっていたため、クロスドメイン伝送の問題が発生していたことが判明しました。

解決：

ビデオ ファイルをページがあるドメインの下に配置します。

元のアドレス: http://blog.csdn.net/luochao_tj/article/details/44942125

<<:  Vueライフサイクルカメラの8つのフック関数

>>:  mysql ワイルドカード (sql 高度なフィルタリング)

推薦する

SQL効率を分析する方法を説明する

Explain コマンドは、データベースのパフォーマンス問題を解決するために最初に推奨されるコマンド...

Vue3 のリアクティブ関数 toRef 関数 ref 関数の紹介

目次リアクティブ機能使用法： toRef 関数 (理解するだけ)使用法： ref関数レスポンシブデー...

TypeScript 列挙の基本と例

目次序文TypeScript の列挙型とは何ですか? TypeScriptで列挙型を使用する際に注意...

CSS ですべての子要素を選択し、スタイルを追加する方法

方法：実際のプロジェクトを例に挙げてみましょう。 .lk-ツールバー{ .el-入力{ 幅: 169...

yum の基本的な使い方と例（推奨）

yumコマンドYum (フルネームは Yellow dog Updater, Modified) ...

JavaScript の基礎におけるデータ型の詳細な説明

目次1. データ型1.1 なぜデータ型が必要なのか? 1.2 変数のデータ型1.3 データ型の分類2...

MySQL 5.7.18 インストールチュートリアルと問題の概要

MySQL 5.7.18 のインストールと問題の概要。今日、新しい MySQL サーバーを導入しまし...

Dockerは単一のイメージを使用して複数のポートにマッピングします

必要：公式サイトのリソースサーバーは確かに1つのインスタンスでは使えず、複数のインスタンスを一緒に使...

jQueryはすべてのショッピングカート機能を実装します

目次1. すべて選択2. 商品の数量を増やすか減らす3. 商品の小計を変更する4. 合計と合計額を計...

...

Docker のインストールと構成イメージの高速化の実装

目次DockerバージョンCentOS に Docker エンジンをインストールするシステム要件古い...

MySQL での挿入効率のいくつかの例の比較

序文最近、仕事の都合で、約 1000w の大量のデータを MySQL に挿入する必要があり、時間がか...

実行中の時計を実装するための純粋な CSS3 コード

操作効果コードの実装html <div id="ウォッチ"> <...

DockerにElasticsearch7.6クラスタをインストールしてパスワードを設定する方法

目次基本的な設定バージョンとDockerイメージについて始めるelasticsearch.ymlにつ...

Linuxのseqコマンドを使用して数字のシーケンスを生成します（推奨）

Linux の seq コマンドは、数字のリストを非常に高速に生成でき、使いやすく柔軟性に優れてい...