gpt4 book ai didi

javascript - 上传前在客户端调整图像大小

转载 作者:行者123 更新时间:2023-11-28 12:15:49 24 4
gpt4 key购买 nike

是否有任何客户端脚本可以自动调整用户在输入文件中上传的图像的大小,并用在同一输入中调整大小的新图像自动替换旧图像..我想这样做以将此图像发送到我的 php 模型之后..提前感谢您的帮助。

 <!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!';
}
?>

最佳答案

这就是我解决这个问题的方法......

// 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 = async function change() {
const maxWidth = 320
const maxHeight = 240
const result = []

for (const file of this.files) {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const img = await file.image()

// native alternetive way (don't take care of exif rotation)
// https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap
// const img = await createImageBitmap(file)

// 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)
const blob = await new Promise(rs => canvas.toBlob(rs, 1))
const resizedFile = new File([blob], file.name, file)
result.push(resizedFile)
}

const fileList = new FileListItem(result)

// 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/

关于javascript - 上传前在客户端调整图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49759386/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com