Skip to content

Instantly share code, notes, and snippets.

@Cartman0

Cartman0/FileAPI_capture_camera.html

Last active August 29, 2015 14:23
Show Gist options
  • Save Cartman0/70393c046522461d241c to your computer and use it in GitHub Desktop.
Save Cartman0/70393c046522461d241c to your computer and use it in GitHub Desktop.
Download ZIP
FileAPI で画像を選択またモバイルではカメラを起動し、画像をCanvasに表示する。なお、iPhone Safari では、2MBの画像は Canvas 上に表示されないので、リサイズして表示する。
Raw
FileAPI_capture_camera.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ファイル選択（カメラ起動）テスト</title>
<style>
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
html, body {
font-size: 16px;
font-family: 'Noto Sans Japanese', sans-serif;
text-align: center;
}
canvas {
border: 1px #333 solid;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<header>
<h1>ファイル選択（カメラ起動）テスト</h1>
</header>
<main>
<p>元画像 <span id="src-width-height">width: height: </span></p>
<p>リサイズ <span id="dst-width-height">width: height: </span></p>
<p><input type="file" accept="image/*" capture="camera" id="file-image"></p>
<canvas id="mycanvas">Canvasに対応しているブラウザを使用して下さい。</canvas>
</main>
<script>
(function() {
var canvas = document.getElementById('mycanvas');
window.onload = function(){
if ( checkFileApi() && checkCanvas(canvas) ){
//ファイル選択
var file_image = document.getElementById('file-image');
file_image.addEventListener('change', selectReadfile, false);
}
}
//canvas に対応しているか
function checkCanvas(canvas){
if (canvas && canvas.getContext){
return true;
}
alert('Not Supported Canvas.');
return false;
}
// FileAPIに対応しているか
function checkFileApi() {
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
return true;
}
alert('The File APIs are not fully in this browser.');
return false;
}
//端末がモバイルか
var _ua = (function(u){
var mobile = {
0: (u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
|| u.indexOf("iphone") != -1
|| u.indexOf("ipod") != -1
|| (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
|| (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
|| u.indexOf("blackberry") != -1,
iPhone: (u.indexOf("iphone") != -1),
Android: (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
};
var tablet = (u.indexOf("windows") != -1 && u.indexOf("touch") != -1)
|| u.indexOf("ipad") != -1
|| (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
|| (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
|| u.indexOf("kindle") != -1
|| u.indexOf("silk") != -1
|| u.indexOf("playbook") != -1;
var pc = !mobile[0] && !tablet;
return {
Mobile: mobile,
Tablet: tablet,
PC: pc
};
})(window.navigator.userAgent.toLowerCase());
//ファイルが選択されたら読み込む
function selectReadfile(e) {
var file = e.target.files;
var reader = new FileReader();
//dataURL形式でファイルを読み込む
reader.readAsDataURL(file[0]);
//ファイルの読込が終了した時の処理
reader.onload = function(){
readDrawImg(reader, canvas, 0, 0);
}
}
function readDrawImg(reader, canvas, x, y){
var img = readImg(reader);
img.onload = function(){
var w = img.width;
var h = img.height;
printWidthHeight( 'src-width-height', true, w, h);
// モバイルであればリサイズ
if(_ua.Mobile[0]){
var resize = resizeWidthHeight(1024, w, h);
printWidthHeight( 'dst-width-height', resize.flag, resize.w, resize.h);
drawImgOnCav(canvas, img, x, y, resize.w, resize.h);
}else{
// モバイル以外では元サイズ
printWidthHeight( 'dst-width-height', false, 0, 0);
drawImgOnCav(canvas, img, x, y, w, h);
}
}
}
//ファイルの読込が終了した時の処理
function readImg(reader){
//ファイル読み取り後の処理
var result_dataURL = reader.result;
var img = new Image();
img.src = result_dataURL;
return img;
}
//キャンバスにImageを表示
function drawImgOnCav(canvas, img, x, y, w, h) {
var ctx = canvas.getContext('2d');
canvas.width = w;
canvas.height = h;
ctx.drawImage(img, x, y, w, h);
}
// リサイズ後のwidth, heightを求める
function resizeWidthHeight(target_length_px, w0, h0){
//リサイズの必要がなければ元のwidth, heightを返す
var length = Math.max(w0, h0);
if(length <= target_length_px){
return{
flag: false,
w: w0,
h: h0
};
}
//リサイズの計算
var w1;
var h1;
if(w0 >= h0){
w1 = target_length_px;
h1 = h0 * target_length_px / w0;
}else{
w1 = w0 * target_length_px / h0;
h1 = target_length_px;
}
return {
flag: true,
w: parseInt(w1),
h: parseInt(h1)
};
}
function printWidthHeight( width_height_id, flag, w, h) {
var wh = document.getElementById(width_height_id);
if(!flag){
wh.innerHTML = "なし";
return;
}
wh.innerHTML = 'width:' + w + ' height:' + h;
}
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment