やするん＠Wiki
やするん＠Wiki

HTML5_0001

ローカル画像をアップロードせずにcanvasに取り込み

以下を参考に作成。

動作確認は次の環境で実施。

  • OS
    Windows XP SP3 (サーバ・クライアント共に)
  • サーバ
    Apache HTTPD 2.2.22
  • ブラウザ
    Mozilla FireFox 20.0.1 / Google Chrome 26.0 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
function preview(ele) {
    if (!ele.files.length) return;  // ファイル未選択
    
    var file = ele.files[0];
    if (!/^image\/(png|jpeg|gif)$/.test(file.type)) return;  // typeプロパティでMIMEタイプを参照

    // CANVAS取得
    var canvas = $("#c1");
    var ctx = canvas[0].getContext("2d");

    var img = document.createElement('img');
    var fr = new FileReader();

    fr.onload = function() {
        img.src = fr.result;  // 読み込んだ画像データをsrcにセット
    }

    img.onload = function() {
        ctx.drawImage(img, 0, 0); // 読み込んだ画像データをcanvasに描画
    }

    fr.readAsDataURL(file);  // 画像読み込み
}
//-->
</script>

</head>
<body>

<form>
<input type="file" name="file" onchange="preview(this)" size="80"/><br/>
<canvas id="c1" width="640" height="480" style="border: dotted;"/>
</form>

</body>
</html>
「HTML5_0001」をウィキ内検索
最終更新：2013年04月23日 16:20