js获取手机图片大小

在JavaScript中获取手机图片的大小通常涉及两个步骤：首先，你需要通过某种方式获取图片文件，然后你可以使用File API来读取该文件的大小。以下是具体的步骤和示例代码：

基础概念

File API：这是一个JavaScript API，允许网页与用户的文件系统进行交互，例如读取用户选择的文件。
Blob对象：表示不可变的原始数据，可以是文件或者原始数据。

类型

图片文件：通常包括JPEG、PNG、GIF等格式。

应用场景

上传前的验证：在用户上传图片之前，检查图片的大小是否符合要求。
动态调整显示：根据图片的实际大小来决定其在页面上的显示方式。

示例代码

以下是一个简单的示例，展示了如何使用JavaScript获取手机上选择的图片文件的大小：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取图片大小</title>
</head>
<body>

<input type="file" id="imageUpload" accept="image/*">

<script>
document.getElementById('imageUpload').addEventListener('change', function(event) {
    var file = event.target.files[0]; // 获取用户选择的文件
    if (file) {
        console.log('图片大小（字节）:', file.size);
        console.log('图片类型:', file.type);
        console.log('图片名称:', file.name);
    } else {
        console.log('没有选择文件');
    }
});
</script>

</body>
</html>

遇到的问题及解决方法

问题：无法获取图片大小

原因：可能是因为用户没有选择任何文件，或者选择的不是图片文件。
解决方法：确保<input type="file">元素的accept属性设置为image/*，这样可以限制用户只能选择图片文件。同时，检查event.target.files数组是否为空。

问题：获取的大小单位不是MB或KB

原因：File API返回的文件大小是以字节为单位的。
解决方法：你可以编写一个简单的函数来将字节转换为KB或MB：

function formatFileSize(bytes) {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
    return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
}

console.log('图片大小:', formatFileSize(file.size));

通过这种方式，你可以更方便地查看和处理图片文件的大小信息。

页面内容是否对你有帮助？

有帮助

没帮助

根据字体大小调整图像大小

、、

我正在整理一个HTML页面，可以在手机和PC/Mac上查看。<p>to do that, then press on button <img src="button.png" /> for 2 seconds</p>如何调整图片大小？最好是纯CSS，但JS仍然可

浏览 1提问于2013-08-26得票数 24

回答已采纳

1回答

我的印象是640x480图片大小得到了广泛的支持，但还有什么呢？我意识到返回当前设备支持的列表图片大小，但我想知道支持的图片大小在世界上的设备范围内的分布情况。据我所见，和都没有提供这些信息。注1:一种可能的近似数据的方法是从等受欢迎的安卓设备列表开始，并在这些手机上找到受支持的相机图片大小。大多数规范站点(如或)只列出了最大分辨率。注2：表示，在某些手机上，是坏的，因此不应该使用；但是，了解其他(未损坏的) Android设备的常见图片大小仍然是有用的。

浏览 2提问于2013-08-29得票数 10

回答已采纳

2回答

android摄像头的预览大小和图片大小有什么不同

、、

在使用摄像头的应用程序中，我需要显示摄像头的预览，我可以通过获取所有支持的预览大小来设置预览大小，并找到最佳的预览大小。我是否也应该为相机设置最佳图片大小？如果有，预览大小和图片大小有什么不同？desiredHeight); selectedPair = sizePair; }使用此方法会在某些手机中显示错误的预览大小

浏览 0提问于2017-02-08得票数 5

1回答

从自定义前相机拍摄的照片在存储过程中被裁剪。

、、、

此外，在一些手机，相机预览显示良好和焦距，但当拍摄，它显示模糊的图像。我不知道为什么它在不同的摄像机中有不同的行为。

浏览 4提问于2015-09-22得票数 1

回答已采纳

1回答

object FileTransfert的upload( )在某些安卓设备上不起作用

、、、、

我开发了一个手机应用程序来帮助分享东西。用户必须提供关于他正在发送的内容的信息，并且他可以添加对象的图片。所以我使用了cordova文件，相机和fileTransfert插件。它在我测试的大多数设备上都工作得很好，但我发现在其他一些手机上却不行。当我在其中一部手机上做一些测试和研究时，我发现我用来向在线服务器发送图像的FileTransfert的upload()方法似乎无法到达存储图像的文件夹。以下是我的代码示例。你能帮我确认一下我是否正确，以及如何让这些手机能够在平台上发布图片吗？

浏览 0提问于2017-12-06得票数 0

1回答

为什么ReactNative维度组件报告降低了分辨率？

、、、、

我设置了一个与我手机分辨率尺寸完全匹配的背景图片，但它在屏幕上看起来很大，足以让我看到背景图片的一小部分。出于调试目的，我在render方法中添加了下面这几行代码来获取设备尺寸：console.warn(height我拍了一张截图并分享给一位同事，图片大小是:1440x2560，这正是我手机的分辨率。几天前，同样的事情也发生在我的工作中，因为我当时正在使用平板电脑，而且没有使用手机。

浏览 8提问于2017-07-10得票数 1

回答已采纳

1回答

Android上的图片需要多大的图片大小才能让图片看起来很好看？

Android上的图片需要多大的图片大小才能让图片看起来很好看？从平板电脑到更小的手机。我知道苹果的硬件很容易弄清楚这一点，但我想知道Android图像的大小。

浏览 3提问于2011-02-02得票数 5

回答已采纳

1回答

Fb个人资料图片没有更好的质量

我使用了以下代码，能够获得图像，但当我试图将其放在布局背景(线性布局)上时，图像质量会降低，并显示模糊的图像。 img_value = new URL("http://graph.facebook.com/"+userId+"/picture?type=large"); // TODO Auto-generated catch block e.printStackTra

浏览 0提问于2012-06-25得票数 0

1回答

为什么在手机上打开网站时要调整图片大小？

、、、

为什么在手机上打开网站时要调整图片大小？phone_thumbs/ipad_mini.png">我在手机上的网站显示如下：但我希望在手机上是这样的(真实图像大小)：我该怎么做呢？

浏览 15提问于2016-09-12得票数 0

1回答

在Android中使用loopj AsyncHttpClient上传后图片大小变化

在手机上传后我的图片大小是1.5MB，图片大小是250KB AsyncHttpClient client = new AsyncHttpClient(); Log.d("MyApp", arg0.getMessage().toString());在服务器中，我使用以下servlet代码获取图像

浏览 2提问于2012-09-19得票数 0

1回答

jquery在ajax回调中获取图像宽度

如何在ajax回调中获取图片大小？它返回值0。index.php<script type="text/javascript"> $(

浏览 4提问于2011-09-17得票数 2

回答已采纳

1回答

takePicture()失败，错误为-2147483648

、

这很好用，除了在Sony Xperia S上:在Logcat中，在调用Camera#takePicture()之后我得到的唯一的东西就是一行代码：我终于发现这款手机的最佳图片尺寸是我尝试手动将图片大小设置为1920x1080，然后takePicture就起作用了。下面是我获得最佳图片大小的代码： Camera.Parametersresult = size;

浏览 0提问于2013-08-02得票数 1

1回答

在android手机上设置摄像头分辨率

、

我正在开发一个应用程序，允许用户拍摄一张照片，然后它在后台做一些工作，然而我遇到了一个问题，我已经硬编码到它的图片大小，它是导致不同的手机上的错误，我正在使用的，我假设它下降到手机不支持相机大小我硬编码

浏览 0提问于2011-11-26得票数 1

回答已采纳

2回答

Qt从文件中打开图像-如何知道图像大小

、、、

我正在用QFileDialog获取图像文件。图像可以使用不同标准图像文件扩展名。如何获取图片大小(宽度和高度)？

浏览 35提问于2013-01-29得票数 4

回答已采纳

1回答

上传大图(>5MB)到adobe创意云，处理并下载到android应用

、、、、

您可以从手机画廊浏览图像，并将分割后的图像储存在选定的文件夹中。如果图片大小超过5mb，android将无法处理。在这种情况下，我希望将图像上传到creative cloud，对其进行处理(即拆分)，然后下载并保存在手机上。我已经将creativesdk集成到我的应用程序中了，但是我不能理解和如何做剩下的事情。

浏览 3提问于2016-01-13得票数 0

2回答

导致Camera.takePicture()失败的图片大小

、

摘要:对于某些图片大小，显式地将相机图片大小设置为受支持的大小会导致在调用Camera.takePicture()之后不调用回调。在调用Camera.open()之后，应用程序调用camera.getParameters()来获取Camera.Parameters对象，然后调用该对象的getSupportedPictureSizes它迭代所支持的图片大小，并选择一个适合某些标准的大小对。然后调用setPictureSize()，传入选定的宽度和高度。在此设备上报告的受支持图片大小之一是1184x1184。

浏览 8提问于2015-05-14得票数 4

1回答

android.hardware.Camera.setParameters获取runTime异常(Android)

、、

我正在做一个有相机功能的项目。我一直面临着一个与表面视图有关的问题。首先，我根据本文实现了：。但这也有一些缺点:它以拉伸的纵横比捕捉图像。我创建了一个CustomView，它实现了SurfaceHolder.Callback来使用mSupportedPreviewSizes = mCamera.getParameters().getSupportedPreviewSizes();计算宿主视图的宽度和高度，但是现在android.hardware.Camera.setParameters得到了我。 public class Preview extends ViewGroup imp

浏览 3提问于2015-11-04得票数 1

回答已采纳

2回答