我正在将转换为 Base 64 的图像的跨站点请求的实现从 Canvas 切换到 XMLHttpRequest 和 FileReader,以便它可以在 Web Worker 内部使用。我想知道是否有办法从一开始就获取图像的宽度和高度。
新功能
var convertFileToDataURLviaFileReader = function (url, callback) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function () {
var reader = new FileReader();
reader.onloadend = function () {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
// Our workaround for the Amazon CORS issue
// Replace HTTPs URL with HTTP
xhr.open('GET', url.replace(/^https:\/\//i, 'http://'));
xhr.send();
}
我们的旧函数
var convertImgToDataURLviaCanvas = function(url, callback, outputFormat) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function () {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
var allInfo = {
data: dataURL,
width: this.width,
height: this.height
}
// Add height and width to callback
callback(allInfo);
canvas = null;
};
// Our workaround for the Amazon CORS issue
// Replace HTTPs URL with HTTP
img.src = url.replace(/^https:\/\//i, 'http://');
}
在旧函数中,我可以使用 Canvas 获取高度和宽度,并且是在 var allInfo
内部执行此操作。是否有 FileReader 的等效项或某种方法来获取新函数内部的宽度和高度?
为了澄清,我将切换到 XMLHttpRequest
因为 Web Workers 无权访问 DOM,因此无法使用 Canvas。
最佳答案
看看这段代码,它只是这个示例的快速修改 https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
您的 reader.result 是 Base 64 编码的字符串吗?
<form>
<input type="file" onchange="previewFile()"><br>
<img src="" alt="Image preview..."><!-- height and width are not set -->
</form>
<script>
var previewFile = () => {
"use strict";
let file = document.querySelector("input[type=file]").files[0];
let fileReader = new FileReader();
let preview = document.querySelector("img")
fileReader.addEventListener("load", () => {
preview.src = fileReader.result;
// here preview.height and preview.width are accessible
// if height and width are not set in the img element in the html
});
if (file) {
fileReader.readAsDataURL(file);
}
};
</script>
关于JavaScript 如何从 XMLHttpRequest 获取图像宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35137464/