我正在获取该区域中丢弃的文件列表。然后获取他们的 dataUrl 并将它们放入 Img 中。然后使用将该图像放入画布中drawImage
。我根据图像的大小进行适当的缩放。其功能正常。但即使在操作完成后,问题仍然存在。例如在 Canvas 被附加到 dom CPU 之后很长一段时间,内存使用率变高。只是为了显示画布,它需要很高的 CPU 和内存。
放置事件内的代码:
e.preventDefault();
$("#controller_search").attr('value', '^')
$("#controller_search").attr('disabled', 'disabled');
$("#imageList").html('');
var templateData = "\
<div class='imageviewer-up'> \
<div class='curtain'></div> \
<canvas class='canvas'></canvas> \
<div class='loading'>0%</div> \
</div> \
";
for(var i=0;i<event.dataTransfer.files.length;++i){
var file = event.dataTransfer.files[i];
var reader = new FileReader();
reader.onload = (function(file){
return function(e){
var template = $(templateData);
var image = new Image();/*template.find('img')[0];*/
image.onload = (function(image){
return function(){
var size = {height: image.height, width: image.width}
var rSize = size;
if(size.height > 175)
rSize = {height: 175, width: (175*size.width)/size.height}
else{
rSize = {height: 175/(size.width/size.height), width: size.width/(size.width/size.height)}
}
image.height = rSize.height;
image.width = rSize.width;
var canvas = template.find('canvas')[0];
var context = canvas.getContext("2d");
context.mozImageSmoothingEnabled = true;
canvas.height = 175+4;
canvas.width = image.width+4;
context.drawImage(image, (canvas.height-image.height)/2, 2, image.width, image.height);
template.css('height', 175+4+0);
template.css('width', image.width+0);
}
})(image)
image.src = e.target.result;
image.title = file.name;
console.log(file.name);
$("#imageList").append(template);
image = null;
}
})(file);
reader.readAsDataURL(file);
}
目前我正在通过拖动 20 个图像(总计达 45 MB)进行测试,以便创建 20 个画布。是不是太多了?
EDIT
我什至测试过使用 IMG 而不是 canvas。例如仅使用带有 dataUrls 的 IMG。但也是这样。以同样的方式减慢。那么我的代码中是否存在内存泄漏?
我认为这是关于 chrome 的问题bug#36412 http://code.google.com/p/chromium/issues/detail?id=36142 The data:
url 占用内存但不释放内存。这就是造成潜在问题的原因。我用它修复了window.URL.createObjectURL https://developer.mozilla.org/en/DOM/window.URL.createObjectURL and window.URL.revokeObjectURL https://developer.mozilla.org/en/DOM/window.URL.revokeObjectURL。对于 webkit 来说window.webkitURL
反而。现在,即使有 30 多个图像,它也能正常工作。当前代码如下所示:
for(var i=0;i<event.dataTransfer.files.length;++i){
var file = event.dataTransfer.files[i];
var total = event.dataTransfer.files.length;
var template = $(templateData);
var image = new Image();/*template.find('img')[0];*/
image.onload = (function(image, template, i){
return function(e){
/* Size adjustment */
var canvas = template.find('canvas')[0];
var context = canvas.getContext("2d");
context.drawImage(image, (canvas.height-image.height)/2, 2, image.width, image.height);
window.URL.revokeObjectURL(this.src);
}
})(image, template, i)
image.src = window.URL.createObjectURL(file);
bong.upload.files.push(file);
$("#imageList").append(template);
image = null;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)