js获取手机内图片尺寸

在JavaScript中获取手机内图片的尺寸，可以通过以下步骤实现：

基础概念

File API：允许网页与用户的文件系统进行交互。
Image对象：用于在网页上显示图像，并可以获取其尺寸。

优势

无需服务器交互：所有操作都在客户端完成，减少了服务器负载。
实时反馈：用户可以选择图片后立即看到尺寸信息。

类型与应用场景

类型：主要涉及文件输入（<input type="file">）和图像对象（Image）。
应用场景：社交媒体上传、电商平台的商品图片管理、在线相册编辑等。

示例代码

以下是一个简单的示例，展示如何使用JavaScript获取手机内图片的尺寸：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Image Dimensions</title>
<script>
function getImageDimensions(file) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve({ width: img.width, height: img.height });
        img.onerror = reject;
        img.src = URL.createObjectURL(file);
    });
}

document.getElementById('fileInput').addEventListener('change', async (event) => {
    const file = event.target.files[0];
    if (file) {
        try {
            const dimensions = await getImageDimensions(file);
            console.log('Image dimensions:', dimensions);
            alert(`Width: ${dimensions.width}, Height: ${dimensions.height}`);
        } catch (error) {
            console.error('Error loading image:', error);
            alert('Failed to load image.');
        }
    }
});
</script>
</head>
<body>
<input type="file" id="fileInput" accept="image/*">
</body>
</html>

可能遇到的问题及解决方法

跨域问题：如果图片来自不同的域，可能会遇到跨域资源共享（CORS）问题。解决方法是在服务器端设置适当的CORS头。
内存限制：大图片可能会消耗大量内存，导致浏览器崩溃。可以通过限制图片大小或在加载前压缩图片来解决。
兼容性问题：某些旧版浏览器可能不完全支持File API。可以通过特性检测来确保兼容性，或者提供一个回退方案。

解决方法示例

对于内存限制问题，可以在加载图片前检查其大小并进行压缩：

function compressImage(file, maxWidth, maxHeight, quality) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = URL.createObjectURL(file);
        img.onload = () => {
            const canvas = document.createElement('canvas');
            let width = img.width;
            let height = img.height;

            if (width > height) {
                if (width > maxWidth) {
                    height *= maxWidth / width;
                    width = maxWidth;
                }
            } else {
                if (height > maxHeight) {
                    width *= maxHeight / height;
                    height = maxHeight;
                }
            }

            canvas.width = width;
            canvas.height = height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);

            canvas.toBlob((blob) => {
                resolve(new File([blob], file.name, { type: file.type }));
            }, file.type, quality);
        };
        img.onerror = reject;
    });
}

通过这种方式，可以在保证用户体验的同时，有效管理资源使用。

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

有帮助

没帮助

使用p5.js将Leap Motion中的跟踪数据保存到.csv

、、、

我需要用p5.js编写一个脚本，以设定的时间间隔(例如20ms)跟踪五个指尖(一只手或两只手)的位置，然后将时间手指数据保存到.csv中我以前在处理表格和获取手指的PVector中做过这件事，但是我不知道如何用

浏览 12提问于2018-02-03得票数 1

3回答

在两个文本元素之间使用Regex而不捕获这些元素？Javascript

、

下面是我需要的正则表达式:在JS中是否有一种方法可以从"myemail+randomstuff@gmail.com“中分离”随机内容“而不获取返回结果中包含的+或@？

浏览 5提问于2015-05-19得票数 1

回答已采纳

8回答

向用户发送私人消息

、、

我正在使用discord.js库和node.js创建一个不和谐的机器人，以方便扑克。它是功能的，除了手是展示给每个人，我需要循环通过球员，并给他们一个DM与他们的手。编辑:在查找用户对象之后，我发现可以使用客户端(bot)的.users属性获取所有用户。我很快就会尝试使用user.sendMessage("string")方法。

浏览 6提问于2017-01-19得票数 38

回答已采纳

2回答

访问通用javascript对象属性

、

我已经设置了这个js对象： "stockRcmnd":{ "name":"stockChange", }现在，我想动态地获取这

浏览 3提问于2012-11-19得票数 0

回答已采纳

1回答

新手在计时器项目中需要帮助

、

我目前正在尝试制作一个可调节的99900毫秒倒计时器，它是由从安卓手机的麦克风中拾取的任何声音(足够强)触发的，并在计时器达到零后播放位于手机内部的SCARY_SOUND.mp3。检索手机内存中的音频文件这是我目前拥有的代码...

浏览 0提问于2019-07-29得票数 0

2回答

如何在地图外的div中显示信息？

、、

我用两个多边形创建了一个简单的地图(我从教程中获得的大部分代码)。我添加了一个L.control()以在div中显示关于多边形的信息。与教程相反，我希望在地图之外显示这个div。我对leaflet和javascript非常陌生，所以如果有人能帮忙的话，那就太好了！

浏览 4提问于2014-01-22得票数 0

回答已采纳

1回答

节点JS，从MySQL获取值并传递给手棒

、、

我怎么能在那里得到结果？app.get('/employ',(req,res) =>{ connection.query(q,(err,result) => { console.log("fetched values successfully..."); r

浏览 7提问于2022-10-27得票数 1

1回答

Chrome扩展- tabId和tabIndex未定义

下面是background.js： function (request, sender) ], "scripts": ["jquery-1.11.0.min.js&quo

浏览 1提问于2014-02-13得票数 1

2回答

我刚刚从Ember.js (或任何MVC前端框架)开始，我几乎没有疑问/问题：首先:这是一种正确的做事方法(this.content.reload())吗？我的API端点接受old_thing参数，该参数允许获取与当前显示的/things/random?old_thing=Something不同的随机内容。在Ember.js中实现这一点的最惯用/正确的方法是什么？如何将这个old_thing传递给find()和reload()？我是否应该像这里建议的那样使用视图：？

浏览 1提问于2013-01-31得票数 2

1回答

团结5 WebGL:与来自C#的外部javascript通信

、、、

我发现这一页： error: failure to execute js

浏览 6提问于2016-09-20得票数 0

2回答

单击将文本放入输入框

在页面上，你点击一个按钮(图片)，文本就会出现。我不太擅长使用数组，所以我不确定从哪里开始。这是我拥有的所有代码： var current_obj=''; var obj=document.getElementById(objID); if (current_obj.style) { obj.style.display='block'; current_

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

回答已采纳

1回答

将同级元素一个对另一个定位

、、

我有一个多行的TABLE。在每一行中，一个TD元素包含几个DIV元素，这些元素：这是这样一个表的简化示例。 &l

浏览 4提问于2011-04-20得票数 1

回答已采纳

1回答

Kendo-Knockout:无法调用模板内的函数

、、

我尝试做的是对下拉列表中的某个元素执行onMouseOver操作，以获取其值并在我的视图模型中对其执行某些操作。span onMouseOver = \'onHover(this)\' title=\'${data}\'>${data}</span>'}" /></div> alert(1); }

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

1回答

Firebase托管的firebase.json函数:firebase.json“重写”

、、

Iam试图使用云函数创建动态页面，但是当我在本地使用cli时，我会从公用文件夹中获取index.html页面。我试着部署这些函数，在防火墙中托管，但问题仍然存在，如果我从公用文件夹中获取index.html页面const functions = require('firebase-functions'); exports.bigben = functions.https.onRequest请有人给

浏览 3提问于2017-10-30得票数 2

回答已采纳

2回答