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

最終更新日:2015年06月19日  (初回投稿日:2015年05月04日)

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に描画しています。(ブラウザ上には表示されていません。)
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でアニメーションを作ってみますよ。
といってもまあ、非エンジニアの私でもできる程度の簡単なアニメーションです。
ラインを描いて時間に合わせて回す、アナログ時計を作ってみました。けっこう大変でした。笑!

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.