Do browsers always keep an image file in memory?
I'm using File API to draw local image files on canvas after user drop them on the page. It works fine in Firefox 5 and Google Chrome. The problem is after I drop 500 Mb image files the browser memory consumption increase on about 500 Mb. But I think it should not be so, because after I draw image on canvas there are no more links to the file. The sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
html, body { margin: 0; padding: 0; border: 0 none; height: 100%; }
#container { width: 100%; min-height: 100%; }
</style>
</head>
<body>
<div id="container">
</div>
<script ty开发者_C百科pe="text/javascript">
var el = document.getElementById('container');
var files = [];
var image = new Image;
var URL_ = window.URL || window.webkitURL;
image.addEventListener('load', function (e) {
// Free link to the file
URL_.revokeObjectURL(image.src);
// Draw image
var canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
canvas.getContext('2d').drawImage(image, 0, 0, 100, 100);
el.appendChild(canvas);
// Process next
generatePreview();
}, false);
el.addEventListener('dragenter', function (e) {
e.preventDefault();
}, false);
el.addEventListener('dragover', function (e) {
e.preventDefault();
}, false);
el.addEventListener('drop', function (e) {
e.preventDefault();
files = Array.prototype.slice.call(e.dataTransfer.files, 0);
generatePreview();
}, false);
function generatePreview() {
if (files.length == 0) return;
image.src = URL_.createObjectURL(files.shift());
}
</script>
</body>
</html>
'after I draw image on canvas'
I'm not a canvas expert but if you're drawing the image onto a <canvas> element, technically the image data is still part of the webpage.
加载中,请稍侯......
精彩评论