0
대역폭을 절약 할 수 있도록 보내기 전에 클라이언트 브라우저에서 자바 스크립트로 그림의 크기를 조정하려고합니다. 코드는 파일에서 EXIF를 읽는 부분을 제외하고는 정상적으로 실행 중입니다. 이 문제는 기능과 관련이 있다고 생각합니다. var exif = EXIF.readFromBinaryFile(new BinaryFile(e.target.result));
자바 스크립트. 업로드하기 전에 이미지 회전
누군가가 나를 도와 줄 수 있습니까?
<script type="text/javascript" src="js/exif.js"></script>
<script type="text/javascript">
function doUpload() {
var file = document.getElementById('fileToUpload').files[0];
var dataUrl = "";
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function(e)
{
img.src = e.target.result;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
reader.onloadend = function (e) {
var exif = EXIF.readFromBinaryFile(new BinaryFile(e.target.result));
switch(exif.Orientation){
case 2:
// horizontal flip
ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
break;
case 3:
// 180° rotate left
ctx.translate(canvas.width, canvas.height);
ctx.rotate(Math.PI);
break;
case 4:
// vertical flip
ctx.translate(0, canvas.height);
ctx.scale(1, -1);
break;
case 5:
// vertical flip + 90 rotate right
ctx.rotate(0.5 * Math.PI);
ctx.scale(1, -1);
break;
case 6:
// 90° rotate right
ctx.rotate(0.5 * Math.PI);
ctx.translate(0, -canvas.height);
break;
case 7:
// horizontal flip + 90 rotate right
ctx.rotate(0.5 * Math.PI);
ctx.translate(canvas.width, -canvas.height);
ctx.scale(-1, 1);
break;
case 8:
// 90° rotate left
ctx.rotate(-0.5 * Math.PI);
ctx.translate(-canvas.width, 0);
break;}
}
// Set Width and Height
var MAX_WIDTH = 1024;
var MAX_HEIGHT = 1024;
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");
document.getElementById('image_preview').src = dataUrl;
// Post the data
var fd = new FormData();
fd.append("image", dataUrl);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
//xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "uploadPicture.php");
xhr.send(fd);
}
// Load files into file reader
reader.readAsDataURL(file);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100/evt.total);
document.getElementById('progress').innerHTML = percentComplete.toString() + '%';
} else {
document.getElementById('progress').innerHTML = 'Upload error!';
}
}
function uploadComplete(evt) {
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("Error on file upload!");
}
function uploadCanceled(evt) {
alert("Upload aborted or network error!");
}
</script>
'console'에 오류가 있습니까? –
오류가 없습니다. 단순히 언급하지 않습니다. ( – DrWatson
당신은 readAsBinaryString 대신 readAsDataURL을 사용하여 이미지를 읽으려고 했습니까? [done] (here) (http://stackoverflow.com/a/7585267/2401386). – Blauharley