我正在尝试调整笨重图像的尺寸以减小图像尺寸。为此，我实现了以下代码。
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type='file' id="fileUpload" />
<canvas id="canvas" width="450" height="300"></canvas>
</body>
<script type="text/javascript">
function el(id) {
return document.getElementById(id);
}
var canvas = el("canvas");
var context = canvas.getContext("2d");
function readImage() {
if ( this.files && this.files[0] ) {
var FR= new FileReader();
FR.onload = function(e) {
var img = new Image();
img.addEventListener("load", function() {
context.drawImage(img, 0, 0);
var MAX_WIDTH = 450;
var MAX_HEIGHT = 300;
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.mozImageSmoothingEnabled = true;
ctx.webkitImageSmoothingEnabled = true;
ctx.msImageSmoothingEnabled = true;
ctx.imageSmoothingEnabled = true;
ctx.drawImage(img, 0, 0, width, height);
});
img.src = e.target.result;
};
FR.readAsDataURL( this.files[0] );
} else {
alert("error");
return false;
}
var canvas = el("canvas");
var dataURL = canvas.toDataURL();
$.ajax({
type: "POST",
url: "http://localhost/newtry/lipak.php",
data: {
imgBase64: dataURL
}
}).done(function(o) {
console.log('saved');
});
}
el("fileUpload").addEventListener("change",readImage);
</script>
</html>
并且在另一个php文件中，我有一个代码来检索此代码，如下所示
file_put_contents('photo.png', base64_decode(substr($_POST['imgBase64'], strpos($_POST['imgBase64'], ",")+1)));
但是当我上传我的第一张图片时，它并没有保存。但是上传另一张图片后，第一张图片被保存了。类似地，第二张，第三张等等。
那么，如何在第一次尝试时检索图像？
最佳答案
Vinay请在加载函数中调用Ajax
function readImage() {
if ( this.files && this.files[0] ) {
var FR= new FileReader();
FR.onload = function(e) {
var img = new Image();
img.addEventListener("load", function() {
context.drawImage(img, 0, 0);
var MAX_WIDTH = 450;
var MAX_HEIGHT = 300;
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.mozImageSmoothingEnabled = true;
ctx.webkitImageSmoothingEnabled = true;
ctx.msImageSmoothingEnabled = true;
ctx.imageSmoothingEnabled = true;
ctx.drawImage(img, 0, 0, width, height);
$.ajax({
type: "POST",
url: "http://localhost/newtry/lipak.php",
data: {
imgBase64: dataURL
}
}).done(function(o) {
console.log('saved');
});
});
img.src = e.target.result;
};
FR.readAsDataURL( this.files[0] );
} else {
alert("error");
return false;
}
var canvas = el("canvas");
var dataURL = canvas.toDataURL();
}
el("fileUpload").addEventListener("change",readImage);
</script>
关于javascript - 第一张图片是否保存在第二张图片上？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45189168/