これは私がユーザー選択イメージを持っていて、イメージがサイズ変更され、サーバーにアップロードされているので、私がacchomplishしようとしているものです。私がしたいのは、画像を選択してサイズを変更してからスクリプトを停止した後です。次に、私が選択したときにサイズ変更されたイメージをアップロードする関数を作成したいと思います。理由は、フォームに入力テキストを追加して、ユーザーが完了したらファイルを使用して画像をアップロードしたいからです。注意:私は、テキスト入力がちょうどfunctions..Iが送信いるFormDataポスト部分formData seperatlyを送信します。
JAVASCRIPT
<script>
function ResizeMe(){
var dataurl = null;
var uniq = 'id' + (new Date()).getTime();
var filesToUpload = document.getElementById('input').files;
var file = filesToUpload[0];
// Create an image
var img = document.createElement("img");
// Create a file reader
var reader = new FileReader();
// Set the image once loaded into file reader
reader.onload = function(e)
{
img.src = e.target.result;
img.onload = function() {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 200;
var MAX_HEIGHT = 400;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH/width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT/height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
dataurl = canvas.toDataURL("image/jpeg",.2);
var blobBin = atob(dataurl.split(',')[1]);
var array = [];
for(var i = 0; i < blobBin.length; i++) {
array.push(blobBin.charCodeAt(i));
}
var files = new Blob([new Uint8Array(array)], {type: 'image/jpg', name: "ddd"});
// Post the data
var fd = new FormData();
fd.append("image", files, uniq);
$.ajax({
url: 'http:///www.***/upload.php',
data: fd,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
$('#form_input')[0].reset();
location.reload();
}
});
} // img.onload
}
// Load files into file reader
reader.readAsDataURL(file);
}
</script>
'ResizeMe()'は何回呼び出されますか?一度に複数のキャンバスが送られるのを待っていますか? – Howzieky
アプリの終了時にちょうど1回。それは1つの画像と収集されたすべてのフォームデータを送信します – INOH
ユーザーは別の画像を取ることを選ぶかもしれないので、1つのキャンバスがアプリを通して私の変更を送っただけです。アプリケーションの最後には、フォームと1つの画像/キャンバスからすべてのデータをアップロードし、すべての画像をmySQLのフォルダとデータにアップロードします。 – INOH