Canvas の toDataURL() メソッドは、画像を dataURL (base64) に変換します。

この記事では主に、canvas で toDataURL() を使用して画像を dataURL (base64) に変換する方法について詳しく紹介します。この記事は、あらゆる人の学習や作業に役立つ情報を提供します。友達の皆さん、ぜひ編集者をフォローして一緒に学んでください。皆さんのお役に立てれば幸いです。

画像を Base64 に変換する利点

画像を Base64 エンコードに変換すると、ファイルをアップロードせずに、画像を他の Web ページやエディターに簡単に挿入できるようになります。 画像を保存する場所を見つける必要がないため、小さな画像の場合には非常に便利です。

画像を Web 上の小さな画像に一般的に使用される Base64 エンコードに変換すると、画像リクエスト (js および css コードに収集される) の数が削減されるだけでなく、何らかの相対パスやエラーによって引き起こされる画像 404 エラーも防ぐことができます。その他の問題もございます。

はじめに

アプリケーション シナリオを想定します。いくつかの特別な理由により、画像パスがサーバーから要求され、対応する画像の Base64 dataURL をこのパスを通じて取得する必要があります。このシナリオでは、最初に画像パスがアクセス可能であると推測し、画像を dataURL に変換する方法も必要です。

どうすればそれを達成できますか?

dataURL

まず、変換されたコンテンツが正しいかどうかを確認するのに役立つ、オーソドックスな dataURL の構文を簡単に確認してみましょう。完全な dataURI は次のようになります。

data:[<mediatype>][;base64],<data>

メディアタイプは、「image/png」、「text/plain」などの MIME ルールに従ってファイル タイプを宣言し、その後にエンコード タイプが続きます。ここでは、base64 についてのみ説明します。ファイルのエンコードされたコンテンツ。 HTML で img タグの src が次のように記述されているのをよく見かけます:

src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7"

この img は、base64 でエンコードされた dataURL を参照します。ブラウザがサポートしている限り、gif 画像にデコードしてレンダリングできます。

.toDataURL()

FileReader オブジェクトにも .readAsDataURL() などの同様のメソッドがありますが、ファイルまたは BLOB タイプのみを受け入れ、これら 2 つのタイプは通常、 要素 files 属性を取得するか、Blob() コンストラクターを使用して新しいオブジェクトを手動で作成します。恥ずかしいことに、現在はブラウザのセキュリティ ポリシーの対象となる画像パスしかなく、 の files 属性は読み取り専用であり、Blob() コンストラクターは file のみを受け入れます。どちらの方法でも、画像パスから直接取得することはできません。上記で想定したアプリケーション シナリオでは、最初にパスを通じて画像コンテンツを取得する方法を検討する必要があります。 は OK で、 に描画できます。 には .toDataURL() メソッドがあります。

すべての準備が完了しました。 で取得した画像を に配置し、それを .toDataURL() メソッドを通じて変換して、base64 でエンコードされた dataURL を取得するだけです。このメソッドの構文を見てみましょう:

canvas.toDataURL([type, encoderOptions]);

canvas は DOM 要素 オブジェクトです。指定されたタイプがサポートされていない場合は、デフォルト値の image/png に置き換えられます。 ; encoderOptions は image/jpeg または image /webp タイプのピクチャで画質を設定できます。値は 0 ～ 1 で、それを超える場合はデフォルト値の 0.92 に置き換えられます。

dataURL に変換する前に、まず画像が正常にロードされていることを確認する必要があることに注意してください。そのため、.toDataURL() メソッドを の onload 非同期イベントに記述する必要があります。次に、関数関数を実装しましょう:

 function getBase64(url){
  //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
  var Img = new Image(),
   dataURL='';
  Img.src=url;
  Img.onload=function(){ //要先确保图片完整获取到，这是个异步事件
   var canvas = document.createElement("canvas"), //创建canvas元素
    width=Img.width, //确保canvas的尺寸和图片一样
    height=Img.height;
   canvas.width=width;
   canvas.height=height;
   canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
   dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL
  };
 }

画像がロードされた後、いつでも呼び出すことができる変換関数が完成しました。

改善

onload イベントにより、読み込み後に変換タスクが確実に実行されますが、新たな問題が発生します。dataURL は画像が読み込まれた後にのみ返され、画像がいつ読み込まれたかを判断できません。 dataURL を後で処理する必要がある場合 (他のサーバーに渡す場合など)、コールバックを追加する必要があります。これにより、dataURL が正常に取得された後に後続の処理タスクが実行されるようにすることができます。 : 実行中に

 function getBase64(url,callback){ //添加一个回调参数
  ...
  Img.onload=function(){
   ...
   canvas.getContext("2d").drawImage(Img,0,0,width,height);
   dataURL=canvas.toDataURL('image/jpeg');
   callback?callback(dataURL):null; //调用回调函数
  };
 }

コールバックを追加:

 getBase64('//upload.jianshu.io/users/upload_avatars/555630/fdd1b798e6b0.jpg',(dataURL)=>{
  console.log(dataURL);
 });

以上です。互換性を考慮しない場合は、Promise と Generator を使用して実装でき、エラー処理を追加すると完璧になります。

関連する推奨事項:

html5 Canvas は画像の回転を実現します

jquery プラグイン Canvaspercent.js はパーセンテージ ラウンド ケーキ効果のサンプル共有を実装します

Canvas が画像を処理する方法

以上がCanvas の toDataURL() メソッドは、画像を dataURL (base64) に変換します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。