[69-13] Canvasで画像データをURLとして取得しよう

Canvasは、toDataURL() というメソッドを使って、Canvas上の内容をURL文字列で取得することもできます。
いわゆるインラインイメージってやつを Canvasで作れちゃうってことですよね。

少し前の「[69-11] Canvasでビットマップを操作しよう」の「サンプル4」で、<img >要素の画像を Canvasに取り込んでみましたが、今回は逆に、Canvas上の画像を <img >要素に表示してみます。
<img>の src属性の値に、取得したURL文字列を設定するんです。

なんのこっちゃ？　でしょうけど、サンプルで動作を確認してみてください。

今回のサンプルはこちら。

黄色いバラは<img >要素に jpeg画像を貼ったもの。
セピアのほうは、その<img >の画像をゲットしてセピア調に変えてから Canvasに描画したもの。

それぞれを、一番下の<img >要素（ブルーのやつ）に、URLを介して表示させられます。どんなURLになっているか確認するために テキストエリアも用意しました。
テキストエリアの下のボタンを押すと、一番下の<img >要素（今はブルーのgif画像が貼ってあります）に、そのURLを使って画像が表示されるという仕掛けです。

toDataURL() は、引数無しだと PNGで出力します

<img >要素の画像（黄色いバラ）をURL化するためのボタンのソースです。
そのままでは無理なので、新しいCanvasを作って、それに画像をゲットし、URL化してtextarea要素へ出力しています。

// ボタンA
function toAurl() {
  var newCanvas = document.createElement('canvas');
  var ctxA = newCanvas.getContext('2d');
  var getimgA = document.getElementById('rose');
  newCanvas.width = rose.width;
  newCanvas.height = rose.height;
  ctxA.drawImage(getimgA, 0, 0);
  var tarea1 = document.getElementById('textArea');
  tarea1.value = newCanvas.toDataURL();
};

8行目までは、新しいCanvasを作り、黄色いバラの画像をゲットし、サイズもそれに合わせて、新しいCanvasに描画しています。（このCanvasはブラウザ上には表示されません）

10行目で、<textarea>要素に、Canvas（変数newCanvas）のデータをURLとして出力する指令を書いています。

上のソース（の10行目）のように、
.toDataURL() の ()の中の引数を省略して書くと、画像データはPNGファイルになります。

この引数は、MIMEタイプで画像を指定します。
デフォルトは「image/png」なので、省略で「image/png」を指定したことに。

黄色いバラの下のボタンを押して、<textarea>要素の表示を見てみると、なってますね、PNGに。

MIMEタイプのすぐあとに、base64 とありますが、これはエンコード方式。画像（バイナリデータ）を文字列（テキストデータ）に変換する方式で、メールもこのbase64だって。

toDataURL() の引数、jpeg の場合は画質の引数もあります

.toDataURL() で ('image/jpeg') とjpegを指定したときは、もう1つ引数を使って画質を指定することができます。

これはボタンBのソース。Canvasのセピア調のバラのURLを出力するとき jpeg を指定しています。
第2引数に0.8と入れているのが画質の指定。0.0〜1.0まで指定できるんだって。

// ボタンB
function toBurl() {
  var tarea2 = document.getElementById('textArea');
  tarea2.value = cnvs.toDataURL('image/jpeg' , 0.8);
};

セピアのバラの下のボタンを押して、<textarea>要素の表示を見てみると、jpegになってますね。

ちなみに画質を「0.0」にするとこんなかんじ。使えんな。0.5からなら、元の画像にもよるけど、いけそうでした。

toDataURL() で取得した画像のURLを、<img>要素の srcに割り当てる

これはボタンCのソースです。
<textarea>要素に表示された URL文字列を、下の<img>要素のsrc属性の値に設定しています。

// ボタンC
function toCurl() {
  var getimgC = document.getElementById('oput');
  oput.src = textArea.value;
};

ちなみに、<textarea>要素に表示された URL文字列をコピーして、ブラウザのアドレスバーにペーストしても画像を表示することができます。

Canvasのグラフィックスのアクセス制限（セキュリティエラー）

Canvasでの操作は javaScriptを使いますので、基本的に同じオリジン（ドメイン）内でしかデータのやり取りができないようになっています。

ただ、Canvasでは、以下のような描き出しはできるそうです。

• 他のドメインからのリソースを貼った<img>要素や<video>要素を、fillstyleでパターンで描画
• 他のドメインからのリソースを貼った<img>要素や<video>要素を、strokestyleでパターンで描画
• 他のドメインからのリソースを貼った<img>要素や<video>要素を、drawImageで描画
• 上の方法で書き出した Canvasを drawImageで描画

ここまで↑はできるのですが、こうして作った Canvas上で、以下のような、その <img>要素や <video>要素の内容に直接アクセスするような操作はできないようになっています。

• getImageData() メソッドを呼び出して画像を ImageData化する
• toDataURL() メソッドを呼び出して画像をURL文字列化する

メソッドを呼び出した時点で、セキュリティエラーが発生するそうです。

次回予告

さて、次回はとうとう（笑）Canvasでアニメーションを作ってみますよ。
といってもまあ、非エンジニアの私でもできる程度の簡単なアニメーションです。
ラインを描いて時間に合わせて回す、アナログ時計を作ってみました。けっこう大変でした。笑！