gpt4 book ai didi

javascript - FileReader、图像和 的高 JavaScript 内存使用率

转载 作者:行者123 更新时间:2023-11-29 14:57:12 24 4
gpt4 key购买 nike

我正在处理图像多点上传,这听起来不错,但是……一如既往的内存问题。

脚本目标是在上传 100 多张图片 (300Mb+) 后继续运行。所以如果你发现(我仍然是 javascript 蹩脚的)任何问题,请给我一个建议。谢谢。

我的代码:

CFileReader.prototype.proccessFile = function(cb) {
// this means File
var reader = new FileReader();
reader.readAsDataURL(this);
reader.onload = (function (f) {
return function(e) {
var image = new Image();
image.src = e.target.result;
image.onload = (function(f) {
return function() {
var maxWidth = 700,
maxHeight = 700,
imageWidth = this.width,
imageHeight = this.height;

if (imageWidth > imageHeight) {
if (imageWidth > maxWidth) {
imageHeight *= maxWidth / imageWidth;
imageWidth = maxWidth;
}
}
else {
if (imageHeight > maxHeight) {
imageWidth *= maxHeight / imageHeight;
imageHeight = maxHeight;
}
}
var canvas = document.createElement('canvas');
canvas.width = imageWidth;
canvas.height = imageHeight;

var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0, imageWidth, imageHeight);
if(typeof cb == 'function') {
cb(f,canvas.toDataURL());
}
delete canvas;
delete ctx;
return;
}
})(f);

};
})(this);
}

最佳答案

我认为 window.createObjectURL 比 FileReader 快,你应该同时使用 filereader 的回退...你也可以检查每个操作的性能,因为每个浏览器都有差异,例如 http://jsperf.com/canvas-image-resizing并且不要忘记 revokeObjectURL 出于内存原因......你也可以是网络 worker http://www.html5rocks.com/en/tutorials/file/filesystem-sync/#toc-readingsync

    if("createObjectURL" in window || "URL" in window && 
"createObjectURL" in window.URL || "webkitURL" in window &&
"createObjectURL" in window.webkitURL) {
if("createObjectURL" in window) {
// Chrome exposes create/revokeObjectURL directly on window
objURL = window.createObjectURL(file);
} else if("webkitURL" in window) {
// Chrome exposes create/revokeObjectURL on the new webkitURL API
objURL = window.webkitURL.createObjectURL(file);
} else {
// FF4 exposes create/revokeObjectURL on the new URL API
objURL = window.URL.createObjectURL(file);
}

// RESIZE image
// STORED IN
// objURL
} else {
// fallback to FileReader for FF3.6
reader = new FileReader();
reader.onload = function(event) {
// RESIZE image
// STORED IN
// event.target.result
}

reader.onprogress = function (evt) {
if (evt.lengthComputable) {
var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
console.log(percentLoaded);
}
}
reader.readAsDataURL(file);
}

关于javascript - FileReader、图像和 <canvas> 的高 JavaScript 内存使用率,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15890151/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com