Das schnelle Aktualisieren des Images mit dem Daten-URI führt zu Caching und Speicherlecks

Ich glaube nicht, dass es irgendwelche Garantien über die Speichernutzung von data-URLs. Wenn Sie herausfinden können, einen Weg, um Sie zu Verhalten in einem browser, garantiert es wenig, wenn nicht nichts zu anderen Browsern oder Versionen.

Wenn Sie Ihre Bild-Daten in ein blob und dann erstellen Sie ein blob-URL können Sie dann freigeben von Daten.

Hier ist ein Beispiel, das sich ein Daten-URI in eine blob-URL, die Sie benötigen, zu ändern /löschen der webkit- & WebKit- Präfixe, die auf anderen Browsern als Chrome und möglicherweise in zukünftigen Versionen von Chrome.

var parts = dataURL.match(/data:([^;]*)(;base64)?,([0-9A-Za-z+/]+)/);

//assume base64 encoding
var 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 ArrayBuffer
var 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 lines

var builder = new WebKitBlobBuilder();
builder.append(buf);

//create blob with mime type, create URL for it
var URL = webkitURL.createObjectURL(builder.getBlob(parts[1]))
return URL;

Freigeben ist so einfach wie :

webkitURL.revokeObjectURL(URL);

Und Sie können Ihren blob-URL als Ihre img's src.

Leider blob-URLs, die anscheinend nicht unterstützt in IE vor v10.

API Referenz:

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

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

Kompatibilität Referenz:

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

InformationsquelleAutor der Antwort ellisbben

Flicken ellisbben Antwort, da BlobBuilder ist veraltet und https://developer.mozilla.org/en-US/Add-ons/Code_snippets/StringView bietet, was scheint, eine schöne schnelle Konvertierung von base64 zu UInt8Array:

in html:

<script src='js/stringview.js'></script>

in js:

window.URL =    window.URL ||
                window.webkitURL;
function blobify_dataurl(dataURL){
    var parts = dataURL.match(/data:([^;]*)(;base64)?,([0-9A-Za-z+/]+)/);

    //assume base64 encoding
    var binStr = atob(parts[3]);

    //convert to binary in StringView
    var view = StringView.base64ToBytes(parts[3]);

    var blob = new Blob([view], {type: parts[1]}); //pass a useful mime type here

    //create blob with mime type, create URL for it
    var outURL = URL.createObjectURL(blob);
    return outURL;
}

Ich verstehe immer noch nicht, es wirklich zu aktualisieren das Bild in Safari mobile, aber chrome kann erhalten dataurls rapid-fire über websocket und halten mit Ihnen weit besser, als wenn man manuell Durchlaufen der Schnur. Und wenn Sie wissen, Sie haben immer die gleiche Art von dataurl, man könnte ja tauschen Sie die regex für eine substring (wahrscheinlich schneller...?)

Laufen einige quick-memory-profile, es sieht aus wie Chrom ist auch in der Lage zu halten mit deallocations (wenn Sie sich erinnern, Sie zu tun...):

URL.revokeObjectURL(outURL);

InformationsquelleAutor der Antwort user3669490

Ich weiß, es ist Jahre her, seit dieses Thema gepostet wurde, aber das problem besteht immer noch in neueren Versionen des Safari-Browsers. So habe ich eine endgültige Lösung, die in allen Browsern funktioniert, und ich glaube, das könnte Arbeitsplätze gesichert oder Leben!.

Kopieren Sie den folgenden code irgendwo in Ihre html-Seite:

//Methods to address the memory leaks problems in Safari
var 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"});
}

Dann, wenn Sie erhalten einen neuen Rahmen/Bild base64Image im base64-format (z.B. data:image/jpeg;base64, LzlqLzRBQ...) und Sie aktualisieren möchten, ein html - <img /> Objekt imageElementdann verwenden Sie diesen code:

//Destroy old image
if(temporaryImage) objectURL.revokeObjectURL(temporaryImage);

//Create a new image from binary data
var imageDataBlob = convertDataURIToBlob(base64Image);

//Create a new object URL object
temporaryImage = objectURL.createObjectURL(imageDataBlob);

//Set the new image
imageElement.src = temporaryImage;

Wiederholen Sie diesen letzten code so viel wie nötig und keine memory leaks angezeigt. Diese Lösung erfordert nicht die Verwendung des canvas-element, aber können Sie sich den code, damit es funktioniert.

InformationsquelleAutor der Antwort Panchosoft

var inc = 1;
                        var Bulk = 540;
                        var tot = 540;
                        var audtot = 35.90;
                        var canvas = document.getElementById("myCanvas");
                        //var imggg = document.getElementById("myimg");
                        canvas.width = 550;
                        canvas.height = 400;
                        var context = canvas.getContext("2d");
                        var variation = 0.2;
                        var interval = 65;
                        function JLoop() {
                            if (inc < tot) {

                                if (vid.currentTime < ((audtot * inc) / tot) - variation || (vid.currentTime > ((audtot * inc) / tot) + variation)) {
                                    contflag = 1;
                                    vid.currentTime = ((audtot * inc) / tot);
                                }
                                //Draw the animation
                                try {
                                    context.clearRect(0, 0, canvas.width, canvas.height);
                                    if (arr[inc - 1] != undefined) {
                                      context.drawImage(arr[inc - 1], 0, 0, canvas.width, canvas.height);

arr[inc - 1].src = "";

                                    //document.getElementById("myimg" + inc).style.display = "block";;
                                    //   document.getElementById("myimg" + (inc-1)).style.display = "none";
                                    //imggg.src = arr[inc - 1].src;
                                    }
                                    $("#audiofile").val(inc);

                                   //clearInterval(ref);
                                } catch (e) {
                                }

                                inc++;
                                //interval = 60;
                                //setTimeout(JLoop, interval);
                            }
                            else {

                            }
                        }
                        var ref = setInterval(JLoop, interval);
                    });

Arbeitete für mich auf einem memory leak Dank dude.

InformationsquelleAutor der Antwort Jay