html 获取图片原始尺寸,JavaScript获取图片的原始尺寸以宽度为例

可以使用JavaScript来获取图片的原始尺寸，以宽度为例，具体方法如下：

1. 创建一个Image对象

var img = new Image();

2. 设置Image对象的src属性，加载图片

img.src = '图片地址';

3. 在Image对象的onload事件中获取图片的原始宽度

img.onload = function () {
  var width = img.width;
  console.log('图片原始宽度为：' + width);
}

完整代码如下：

var img = new Image();
img.src = '图片地址';
img.onload = function () {
  var width = img.width;
  console.log('图片原始宽度为：' + width);
}

注意：为了避免在获取图片尺寸时出现跨域问题，需要确保图片地址与当前页面的域名相同。如果图片地址与当前页面的域名不同，需要使用后端接口或者CORS技术来解决跨域问题。

相关问题

js获取图片原始宽高

要获取图片的原始宽度和高度，你可以使用JavaScript中的`naturalWidth`和`naturalHeight`属性。下面是一个示例代码：

var img = document.getElementById('myImage');
var width = img.naturalWidth;
var height = img.naturalHeight;
console.log('原始宽度：', width);
console.log('原始高度：', height);

在上面的代码中，我们首先通过`getElementById`方法获取到图片元素，其中`'myImage'`是图片的id。然后，我们可以使用`.naturalWidth`和`.naturalHeight`属性分别获取到图片的原始宽度和高度。最后，我们可以将这些值打印到控制台上或者根据需要进行处理。

请确保在获取宽度和高度之前，图片已经加载完成，否则可能会得到0或不准确的结果。你可以在`onload`事件中执行上述代码，以确保在图片加载完成后再获取宽度和高度。

上面的方法只能获取到图片的尺寸，如何获取图片的分辨率

获取图片的分辨率（像素密度，也称为DPI）比单纯获取尺寸（宽度和高度）要复杂一些，特别是当图片是以矢量格式（如SVG）或嵌入式HTML5 `<img>` 标签的方式存在时，它们的分辨率并不直接反映尺寸大小。不过对于常见的位图格式（如JPEG、PNG），你可以通过以下步骤来获取图片的分辨率：

1. 对于浏览器中的HTML5 `<img>` 元素：
- 使用`naturalWidth` 和 `naturalHeight` 属性，这两个属性返回的是未缩放的原始宽度和高度。但是，这不一定等于图片的实际分辨率，因为图片可能已经进行了缩放。

   const img = document.getElementById('your-image-id');
   const width = img.naturalWidth;
   const height = img.naturalHeight;

2. 对于DOM元素内的 `<canvas>`：
- 创建一个`<canvas>`并将其渲染到图片上，然后从`canvas`的`width`和`height`属性中获取信息。这个方法可以得到更准确的分辨率，因为它会考虑实际绘制时的图像数据。

   const canvas = document.createElement('canvas');
   canvas.width = img.width;
   canvas.height = img.height;
   canvas.getContext('2d').drawImage(img, 0, 0);
   const devicePixelRatio = window.devicePixelRatio || 1;
   const resolution = { width: canvas.width / devicePixelRatio, height: canvas.height / devicePixelRatio };

3. 对于Blob或File对象（比如通过FileReader读取文件）：
- 需要借助其他库，例如`html2canvas`，先转化为`<img>`元素再进行上述操作。

请注意，对于网络图片或用户上传的文件，图片的最终分辨率取决于其原作者保存时的情况，上述方法只是尽可能地提供相关信息。