这是我的代码片段(已删除不必要的代码行):
我想获取已上传原始图像的宽度和高度,以便我可以调整其大小。我无法从 imageFile 中获取它,因为它返回 undefined,也无法从 img 变量中获取它,因为它最初取决于我的 CSS(在 CSS 中,
我尝试将以下代码添加到 img.onload 中:
在这里,我访问我的原始图像(即 imageFile),为它创建 blob 并获取该 blob 链接。但是我无法访问该 blob 链接图像的宽度和高度。有什么建议吗?
注意:我认为问题就在于 img.onload 本身。因为在这一行中,我传递了那个 img:
FYI. 这是我上传图片时的样子。这里大约是90x90像素。这导致了画布的问题,因为img.onload使用的是这些尺寸(90x90),而不是原始尺寸,大约为5000x5000。
调整大小后的图片如下:
编辑:
如果有人感兴趣,我可以在下面留言中粘贴我的解决代码版本,以便您进行调整。
let imgInput = document.getElementById('id_photo');
imgInput.addEventListener('change', function (e) {
if (e.target.files) {
for (let i = 0; i < e.target.files.length; i++) {
let imageFile = e.target.files[i];
var reader = new FileReader();
reader.onload = function (e) {
var img = document.getElementById(nevermindID);
img.onload = function() {
var shape = resizeImage(img) // resizing image for future canvas drawing, returns [width, height] (resized)
var canvas = document.createElement("canvas")
canvas.width = shape[0]
canvas.height = shape[1]
var ctx = canvas.getContext("2d")
ctx.drawImage(img, 0, 0, shape[0], shape[1])
// converting to base64 logic and the rest code
}
img.src = e.target.result;
}
reader.readAsDataURL(imageFile);
}
}
});
我想获取已上传原始图像的宽度和高度,以便我可以调整其大小。我无法从 imageFile 中获取它,因为它返回 undefined,也无法从 img 变量中获取它,因为它最初取决于我的 CSS(在 CSS 中,
<img>
标签位于不是全屏的 <div>
标签中,假设它是 400 像素)。因此,相应地,如果我上传的图像大小为 5000x5000,则它将不是原始大小(希望您明白)。我的问题是,因为我的 CSS 调整了该 div 和其中的元素的大小,所以我无法获取原始图像的正常宽度和高度,因此我不能调整大小,然后使用 canvas 绘制,然后将其转换为 base64。我尝试将以下代码添加到 img.onload 中:
var blobURL = URL.createObjectURL(imageFile)
在这里,我访问我的原始图像(即 imageFile),为它创建 blob 并获取该 blob 链接。但是我无法访问该 blob 链接图像的宽度和高度。有什么建议吗?
注意:我认为问题就在于 img.onload 本身。因为在这一行中,我传递了那个 img:
ctx.drawImage(img, 0, 0, shape[0], shape[1])
FYI. 这是我上传图片时的样子。这里大约是90x90像素。这导致了画布的问题,因为img.onload使用的是这些尺寸(90x90),而不是原始尺寸,大约为5000x5000。
![输入图像描述](https://istack.dev59.com/O555q.webp)
![输入图像描述](https://istack.dev59.com/OLfum.webp)
如果有人感兴趣,我可以在下面留言中粘贴我的解决代码版本,以便您进行调整。