Canvas の toDataURL() メソッドは、画像を dataURL (base64) に変換します。-jsチュートリアル-php.cn

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

小云云

リリース： 2018-01-18 10:15:58

オリジナル

4921 人が閲覧しました

この記事では主に、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 で、

すべての準備が完了しました。で取得した画像を

canvas.toDataURL([type, encoderOptions]);

ログイン後にコピー

canvas は DOM 要素

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 を使用して実装でき、エラー処理を追加すると完璧になります。