我上传图片有点问题。 有时,有人会以错误的方向上传照片。 我想要做的是在将图像发送到我的服务器之前旋转图像。 这可能吗?
我知道我可以使用 php 中的imagerotate()
功能,但我可以在图片上传后使用它。
有没有办法通过javascript(或Jquery)来旋转图像,然后通过php将信息传递给服务器?
现在我做了这样的事情:
HTML
<form method="POST" enctype="multipart/form-data">
<input type="file" id="file" name="file">
<div id="preview"></div>
<br>
<a href="#" id="counter" class="row"><- counter</a>
<select id="degree">
<option>90</option>
</select>
<a href="#" id="clockwise" class="row">clockwise -></a>
<hr>
<button type="submit">save image</button>
</form>
Jquery的
$(document).ready(function() {
$('.row').click(function(){
var a = $('img').getRotateAngle();
var d = Math.abs($('#degree').val());
if($(this).attr('id') == 'counter'){
//d = -Math.abs(+a - +d);
d = a - d;
}
else{d = +a + +d;}
$('img').rotate({animateTo:d});
});
/* image preview */
$('#file').change(function(){
var oFReader = new FileReader();
oFReader.readAsDataURL(this.files[0]);
console.log(this.files[0]);
oFReader.onload = function (oFREvent) {
$('#preview').html('<img src="'+oFREvent.target.result+'">');
};
});
});
但我无法转移&#39;&#39;&#39;上传文件,我想......
非常感谢!
答案 0 :(得分:3)
这是我采取的方法:
允许用户在浏览器中旋转图像。当他们这样做时,将隐藏输入字段的值设置为旋转角度。
然后,当图像发布到PHP时,您可以读取旋转字段并处理图像。
答案 1 :(得分:0)
要在 Javascript 中旋转图像,您可以使用这个简单的函数。只需使用单个旋转按钮(而不是同时向右旋转和向左旋转),此功能将在四个选项之间循环。
function rotatePreview() {
var img = document.getElementById('preview-photo');
var currentrotate = img.style.transform;
var newrotate = '';
var rotatevalue = 0;
switch(currentrotate){
case '':
newrotate = 'rotate(90deg)';
rotatevalue = 90;
break;
case 'rotate(90deg)':
newrotate = 'rotate(180deg)';
rotatevalue = 180;
break;
case 'rotate(180deg)':
newrotate = 'rotate(270deg)';
rotatevalue = 270;
break;
case 'rotate(270deg)':
newrotate = '';
rotatevalue = 0;
break;
}
img.style.transform = newrotate;
document.getElementById("rotatevalue").value = rotatevalue;
}
此函数将图像比当前旋转多旋转 90 度,并将新的旋转值保存在隐藏输入中,然后您可以提交给 PHP 并在保存之前在 PHP 中将图像旋转相同的量它在服务器上。