I know it's been years since this issue was posted, but the problem still exists in recent versions of Safari Browser. So I have a definitive solution that works in all browsers, and I think this could save jobs or lives!.

Copy the following code somewhere in your html page:

// Methods to address the memory leaks problems in Safarivar BASE64_MARKER = ';base64,';var temporaryImage;var objectURL = window.URL || window.webkitURL;function convertDataURIToBlob(dataURI) {    // Validate input data    if(!dataURI) return;    // Convert image (in base64) to binary data    var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;    var base64 = dataURI.substring(base64Index);    var raw = window.atob(base64);    var rawLength = raw.length;    var array = new Uint8Array(new ArrayBuffer(rawLength));    for(i = 0; i < rawLength; i++) {        array[i] = raw.charCodeAt(i);    }    // Create and return a new blob object using binary data    return new Blob([array], {type: "image/jpeg"});}

Then when you receive a new frame/image base64Image in base64 format (e.g. data:image/jpeg;base64, LzlqLzRBQ...) and you want to update a html <img /> object imageElement, then use this code:

// Destroy old imageif(temporaryImage) objectURL.revokeObjectURL(temporaryImage);// Create a new image from binary datavar imageDataBlob = convertDataURIToBlob(base64Image);// Create a new object URL objecttemporaryImage = objectURL.createObjectURL(imageDataBlob);// Set the new imageimageElement.src = temporaryImage;

Repeat this last code as much as needed and no memory leaks will appear. This solution doesn't require the use of the canvas element, but you can adapt the code to make it work.

Try setting image.src = "" after drawing.

var canvas = document.getElementById("placeholder_canvas");var ctx = canvas.getContext("2d");var img = new Image();img.onload = function() {    ctx.drawImage(img, 0, 0);     //after drawing set src empty    img.src = "";}   img.src = "data:image/png;base64," + imgString;

This might be helped

I don't think there are any guarantees given about the memory usage of data URLs. If you can figure out a way to get them to behave in one browser, it guarantees little if not nothing about other browsers or versions.

If you put your image data into a blob and then create a blob URL, you can then deallocate that data.

Here's an example which turns a data URI into a blob URL; you may need to change / drop the webkit- & WebKit- prefixes on browsers other than Chrome and possibly future versions of Chrome.

var parts = dataURL.match(/data:([^;]*)(;base64)?,([0-9A-Za-z+/]+)/);//assume base64 encodingvar binStr = atob(parts[3]);//might be able to replace the following lines with just// var view = new Uint8Array(binStr);//haven't tested.//convert to binary in ArrayBuffervar buf = new ArrayBuffer(binStr.length);var view = new Uint8Array(buf);for(var i = 0; i < view.length; i++)  view[i] = binStr.charCodeAt(i);//end of the possibly unnecessary linesvar builder = new WebKitBlobBuilder();builder.append(buf);//create blob with mime type, create URL for itvar URL = webkitURL.createObjectURL(builder.getBlob(parts[1]))return URL;

Deallocating is as easy as :

webkitURL.revokeObjectURL(URL);

And you can use your blob URL as your img's src.

Unfortunately, blob URLs do not appear to be supported in IE prior to v10.

API reference:

http://www.w3.org/TR/FileAPI/#dfn-createObjectURL

http://www.w3.org/TR/FileAPI/#dfn-revokeObjectURL

Compatibility reference:

http://caniuse.com/#search=blob%20url