サンプル＿画像データをURLとして取得してみる

ロード時は、<img>要素には黄色いバラの画像。
となりの <canvas>要素には <img>要素から取り込んだ黄色いバラの画像をセピア調にして描画しています。

B、A、C のボタンを押すと、下記の動作をします。
A <img>要素の画像URLを<textarea>へ出力 → <textarea>要素に画像のURL文字列を表示。
B <canvas>要素の画像URLを<textarea>へ出力 → <textarea>要素に画像のURL文字列を表示。
C 出力されたURLを「出力用の<img>要素」に表示 → <textarea>要素の内容を出力用の<img>要素に表示。

出力用の<img>要素

このサンプルページの javaScriptです。

//ページのロード時のcanvasへの描画（img要素から黄色いばらの画像をゲットしてセピア調にして描画）
onload = function() {
  var ctx = document.getElementById('cnvs').getContext('2d');
  var getimg = document.getElementById('rose');
  ctx.drawImage(getimg, 0, 0);
  var imageData = ctx.getImageData(0,0,300,300);
  var imgd = imageData.data;
  var len = imgd.length/4;
  for (var i = 0; i < len; ++i) {
    var gray = (imgd[i*4] + imgd[i*4+1] + imgd[i*4+2])/3;
    imgd[i*4] = parseInt((gray/255)*240);
	imgd[i*4+1] = parseInt((gray/255)*200);
	imgd[i*4+2] = parseInt((gray/255)*145);
    imgd[i*4+3] = 255;
    }
  ctx.putImageData(imageData, 0, 0);
};

// ボタンA（img要素の画像（黄色いバラ）を新しいcanvasにゲットし、URL化してtextarea要素へ出力）
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();
};

// ボタンB（Canvas要素の画像（セピア調のバラ）を jpegとしてURL化して、textarea要素へ出力）
function toBurl() {
  var tarea2 = document.getElementById('textArea');
  tarea2.value = cnvs.toDataURL('image/jpeg' , 0.8);
};

// ボタンC（textarea要素に表示された URL文字列を、下のimg要素のsrcに設定）
function toCurl() {
  var getimgC = document.getElementById('oput');
  oput.src = textArea.value;
};

このサンプルページの HTMLの要点です。

<img src="img/img2rose.jpg" id="rose">
<canvas id="cnvs" width="300" height="300"></canvas>
<button onClick="toAurl()"><b>A</b>　&lt;img&gt;要素の画像URLを&lt;textarea&gt;へ出力</button>
<button onClick="toBurl()"><b>B</b>　&lt;canvas&gt;要素の画像URLを&lt;textarea&gt;へ出力</button>

<textarea id="textArea" rows="6" cols="70"></textarea>
<button onClick="toCurl()"><b>C</b>　出力されたURLを「出力用の&lt;img&gt;要素」に表示</button>

<img src="img/img3oput.gif" id="oput">

このサンプルのCSSはこちら（別ウィンドウで開く）