I'm writing an SVG editor. I have placed a kind of 'Magic Eye' on the page where the user can see the entire SVG draw and the zoomed area around the mouse cursor. Of course the problem is Memory usage and fast rendering. For this reason, step of modification or zooming the software create a reduced Image of the svg draw and it will use it for the Magic Eye rendering. The result is very nice but.... I am facing a problem, I discovered that the garbage collector doesn't free the images created and also the blobs. So after a few time I have the memory filled with Images. This is the routine I wrote for this job:
var RenderPosition = function(obj) {
try{
var clearCanvas = function(context, canvas) {
context.clearRect(0, 0, canvas.width, canvas.height);
var w = canvas.width;
canvas.width = 1;
canvas.width = w;
};
var PrepareBlob = function(blob){
glb._ThumbUrl = glb._DOMURL.createObjectURL(blob);
glb._MagicImg = new Image();
glb._MagicImg.src = glb._ThumbUrl;
};
var PosizViewFilling = function(e){
obj.pDC.drawImage(this,
obj.srt.x,
obj.srt.y,
obj.dms.width,
obj.dms.height);
obj.canvas.toBlob(PrepareBlob);
this.removeEventListener('load',PosizViewFilling,true);
this.src='';
delete this;
};
clearCanvas(obj.pDC,obj.canvas);
if (glb._MagicImg!==null) delete(glb._MagicImg);
glb._DOMURL.revokeObjectURL(glb._ThumbUrl);
var Big_img = new Image();
Big_img.addEventListener('load',PosizViewFilling, true);
Big_img.src = 'data:image/svg+xml;base64,'+btoa(obj.dw); //data from a svg draw
}
catch(err){
console.log(err.message);
}
};
As you can see the routine creates in first the Big_image with the SVG draw. After it creates a resized image in memory. I tried a different approach but also the only Big_image and the obj.dw is enough to live memory leaks. What is wrong? It may be I'm not able to see my bug. I hope I can get a suggestion from different perspectives.
You may also want to consider letting the SVG scale itself.
#main {
width: 400px;
height: 400px;
}
svg {
width: 100%;
height: 100%;
}
#thumb, #zoom {
width: 40px;
height: 40px;
border: solid 1px black;
overflow: hidden;
}
#zoom svg {
width: 400px;
height: 400px;
position: relative;
top: -140px;
left: -210px
}
<div id="main">
<svg id="mainsvg" viewBox="0 0 1000 1000">
<rect x="100" y="100" width="500" height="500" fill="green"
transform="rotate(10,350,350)"/>
<rect x="400" y="400" width="500" height="500" fill="orange"
transform="rotate(-10,650,650)"/>
</svg>
</div>
<div id="thumb">
<svg xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#mainsvg" />
</svg>
</div>
<div id="zoom">
<svg xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#mainsvg" />
</svg>
</div>