上传前先在客户端调整图像大小 [英] Resize image in the client side before upload
本文介绍了上传前先在客户端调整图像大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否有任何客户端脚本可以自动调整用户在输入文件中上载的图像的大小，并自动将旧图像替换为在同一输入中调整大小的新图像.之后的我的php模型..在此先感谢您的帮助.
Is there any client side script can resize automatically the image uploaded in the input file by the user, and replace automatically the old image by the new image resized in the same input ..I want to do this to send this image to my php model after.. thanks in advance for your help.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<form action="model.php" method="post" enctype="multipart/form-data">
<input type="file" name="image"/>
<input type="submit" name="do" value="submit"/>
</form>
</body>
</html>
<?php
$target_dir = "folder/";
$filename = $_FILES["image"]["name"];
$basename = basename($_FILES["image"]["name"]);
$target_file = $target_dir .$basename;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
$tmp = $_FILES["image"]["tmp_name"];
if(move_uploaded_file($tmp,$target_file))
{
echo'done!';
}
?>
推荐答案
这就是我要解决的方式...
This is how i would have solved it...
// Used for creating a new FileList in a round-about way
function FileListItem(a) {
a = [].slice.call(Array.isArray(a) ? a : arguments)
for (var c, b = c = a.length, d = !0; b-- && d;) d = a[b] instanceof File
if (!d) throw new TypeError("expected argument to FileList is File or array of File objects")
for (b = (new ClipboardEvent("")).clipboardData || new DataTransfer; c--;) b.items.add(a[c])
return b.files
}
fileInput.onchange = function change() {
const file = this.files[0]
if (!file) return
file.image().then(img => {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const maxWidth = 320
const maxHeight = 240
// calculate new size
const ratio = Math.min(maxWidth / img.width, maxHeight / img.height)
const width = img.width * ratio + .5 | 0
const height = img.height * ratio + .5 | 0
// resize the canvas to the new dimensions
canvas.width = width
canvas.height = height
// scale & draw the image onto the canvas
ctx.drawImage(img, 0, 0, width, height)
// just to preview
// document.body.appendChild(canvas)
// Get the binary (aka blob)
canvas.toBlob(blob => {
const resizedFile = new File([blob], file.name, file)
const fileList = new FileListItem(resizedFile)
// temporary remove event listener since
// assigning a new filelist to the input
// will trigger a new change event...
fileInput.onchange = null
fileInput.files = fileList
fileInput.onchange = change
})
})
}
<!-- screw-filereader will take care of exif rotation for u -->
<script src="https://cdn.jsdelivr.net/npm/screw-filereader@1.4.3/index.min.js"></script>
<form action="https://httpbin.org/post" method="post" enctype="multipart/form-data">
<input type="file" id="fileInput" name="image" accept="image/*" />
<input type="submit" name="do" value="submit" />
</form>
PS.由于iframe更加沙盒化和安全，它不会在stackoverflow中调整大小，可以在jsfiddle中工作: https://jsfiddle .net/f2oungs3/3/
PS. it won't resize in stackoverflow due to iframe being more sandboxed and secure, work in jsfiddle: https://jsfiddle.net/f2oungs3/3/
这篇关于上传前先在客户端调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
