Mの備忘録 - Carnet de M -

<div class="upload"><input type="file" name="file" id="file"></div>
<canvas id="canvas"></canvas>
<div id="result"></div>
<a id="download"></a>

<script>
var file = document.getElementById('file');
var canvas = document.getElementById('canvas');
var canvasWidth = 492;
var canvasHeight = 492;
var x =0;

// Canvasの準備
canvas.width = canvasWidth;
canvas.height = canvasHeight;

var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.fillStyle = "#C0C0C0";
ctx.fillRect(0, 0, canvasWidth, canvasHeight);

function loadLocalImage(e) {

for (var i = 0, f; f = e.target.files[i]; i++) {
    // 画像ファイル以外は処理を止める
    if(!f.type.match('image.*')) {
        alert('画像を選択してください');
    return;
    }
    // FileReaderオブジェクトを使ってファイル読み込み
    var reader = new FileReader();
        reader.onload = (function(theFile) {
            return function(e) {
            console.log(x);
            canvasDraw(reader.result,x);
            if(x==1){x=0;
            }else{x++;
            }
          
        };
    })(f);
    // ファイル読み込みを実行
    reader.readAsDataURL(f);
    }
}
// ファイルが指定された時にloadLocalImage()を実行
file.addEventListener('change', loadLocalImage, false);

// Canvas上に画像を表示する
function canvasDraw(imgSrc,i) {

// Canvas上に画像を表示
var img = new Image();
img.src = imgSrc;
img.onload = function() {
    ctx.drawImage(img, i*canvasWidth/2, 0, canvasWidth/2,canvasHeight,i*canvasWidth/2, 0,canvasWidth/2, canvasHeight);
    // canvasを画像に変換
    var data = canvas.toDataURL();

    // ダウンロードリンクを生成して出力
    var dlLink = document.getElementById('download');
    dlLink.href = data;
    dlLink.download = 'spliticon.png';
    dlLink.innerText = 'ダウンロード';
    document.getElementById('result').appendChild(dlLink);
};
}
</script>