アプリ開発ためのメモ

2017年3月17日金曜日

canvas drawImage() 画像が表示されない

以下のように画面に画像を表示させたいが、うまく行かなかった。

drawFrame();

function drawFrame() {
var img = new Image();
img.src = "./frame.jpg";
ctx.drawImage(img, 0, 0);
}

原因は、画像をload完了しないまま、drawImageが実行してしまった。
onloadを追加してあげると、解決できた。

　　img.onload = function() {
ctx.drawImage(img, 0, 0);
}

2017年3月15日水曜日

jsで二次配列を使うには

var orgSize = [];
orgSize[j]['width'] = img.width;

というふうにorgSizeを二次配列として使おうが、エラーになった。

orgSize[j] = new Array();
のように、さらに配列宣言をしないといけない。

2017年3月10日金曜日

JQuery id セレクタに変数と配列を使う場合

document.getElementById( "caseFrame" ).innerHTML += '<div class = "drag" style="display:inline-block"><img id="upload-pic[' + memory_file_counter +　']" src="' + dataUri + '"></div>' ;

ここで[0]みたいようなidを指定する必要があります。
var resizeId = '#upload-pic\\[' + memory_file_counter + '\\]';
$(resizeId).resizable();

\\で[や]など特殊文字を変換、+で変数を入れる。

2017年3月6日月曜日

jquery attr error

下記のコマンドを実行したら、エラーになった。

upload_pic = $('[name^=upload-pic]');
var attr_style = upload_pic[0].attr('style');
console.log(attr_style);

Uncaught TypeError: upload_pic[0].attr is not a function

調べてみたら、upload_pic[0]はplain DOM elementsのため、.attrを使うには、 jQuery objectに変換する必要があります。
var attr_style = $(upload_pic[0]).attr('style');

2017年3月3日金曜日

PHPで複数のfileをupload

HTML側
<form method="POST" enctype="multipart/form-data" action="merge.php">
<input type="file" name="upload_file[]" multiple id="file">
<input type="submit" name="submit" value="upload" />

PHP側
<?php
if(count($_FILES['upload_file'])) {
foreach($_FILES['upload_file'] as $file) {
print_r($file);
}
}

参考：https://davidwalsh.name/multiple-file-upload

2017年3月2日木曜日

HTML5 File API

<input type="file" multiple id="file">  //multipleあれば、複数ファイルを選択できる

document.getElementById( "file" ).addEventListener( "change", function() {
 var fileList = this.files ;  //this.filesはFileListオブジェクト
 for( var i=0,l=fileList.length; l>i; i++ ) {
  var fileReader = new FileReader() ;　//インスタンスを作成  fileReader.readAsDataURL( fileList[i] ) ;  // ファイルをデータURIとして読み込む

//読み込みが成功して完了した場合、HTMLを書き出す
  fileReader.onload = function() {
   var dataUri = this.result ;
   document.getElementById( "output" ).innerHTML += '<img src="' + dataUri + '">' ;
  } 
 }
} ) ;

参考：

https://syncer.jp/javascript-reverse-reference/output-local-image

https://app.codegrid.net/entry/file-api-filereader-api

複数のfileをuploadするには