input 上传图片如何不通过blob获取到图片的宽高？-灵析社区
我头像最美看网上的方法大多是这样的 let url = window.URL || window.webkitURL let img = new Image() img.src = url.createObjectURL(files) 然后可以在img.onload () {} 获取到上传图片的宽高，而且上传图片的时候要判断图片的宽高是否符合已经定义好的宽高，确定就上传，取消就不上传 但是呢更到线上后，上传图片就被拦截了，blob不太行，所以想问一下有不通过blob的方式获取到上传图片的宽高吗，报错信息大致是  有啥解决办法呢，只想获取图片的宽高~~~
小青梅let reader = new FileReader();
reader.onload = function (e) {
let img = new Image();
img.onload = function () {
console.log(img.width, img.height);
};
img.src = e.target.result;
};
reader.readAsDataURL(files[0]); // 假设files[0]是你的图片文件
,
万码8LB30MLH由于内容安全策略（Content Security Policy, CSP）的限制，直接使用 "blob:" URL 可能会遇到问题。不过，你可以通过创建一个 "FileReader" 来读取文件，然后使用 "createObjectURL" 创建一个 "ObjectURL"，这样可以避免直接使用 "blob:" URL。以下是如何实现这一点的示例代码：
javascript
function getImageSize(file, callback) {
// 使用FileReader读取文件
var reader = new FileReader();
reader.onload = function(e) {
// 创建一个Image对象
var img = new Image();
img.onload = function() {
// 当图片加载完成后，可以获取宽高
var width = img.width;
var height = img.height;
// 执行回调函数，并传入宽高
callback(width, height);
// 释放Image对象
img = null;
};
// 设置Image的src为读取到的数据
img.src = e.target.result;
};
// 以DataURL的形式读取文件
reader.readAsDataURL(file);
}
// 使用示例
var inputElement = document.querySelector('input[type="file"]');
inputElement.addEventListener('change', function(event) {
var file = event.target.files[0];
if (file) {
getImageSize(file, function(width, height) {
console.log('图片宽：' + width + '，图片高：' + height);
// 在这里判断宽高是否符合要求，然后决定是否上传
});
}
});
在这个例子中，"FileReader" 用于将文件读取为 Data URL，这是一种将文件嵌入到代码中的方法，它通常不会违反 CSP 的 "img-src" 指令。Data URL 是一种特殊格式的 URL，它将文件内容直接编码在 URL 中。
注意，使用 Data URLs 可能会增加内存的使用，因为整个文件内容都会被编码到字符串中。对于大文件，这可能会成为一个问题。
确保在使用此方法时，你的 CSP 允许 "data:" 作为 "img-src" 的源。如果 CSP 仍然不允许，你可能需要调整你的 CSP 设置，或者考虑将图片上传到服务器，然后在服务器端获取图片的尺寸信息。