Wie kann ich ein Bild aus der HTML5-Datei-API auf Canvas zeichnen?

Ich würde gerne zeichnen ein Bild geöffnet mit der HTML5 File-API auf eine Leinwand.

In der handleFiles(e) Methode, auf die ich zugreifen kann, die Datei mit e.target.files[0] aber ich kann nicht zeichnen, das Bild direkt mit drawImage. Wie erstelle ich ein image von der Datei-API für HTML5-canvas?

Hier ist der code, den ich verwendet habe:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script>
window.onload = function() {
    var input = document.getElementById('input');
    input.addEventListener('change', handleFiles);
}

function handleFiles(e) {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.drawImage(e.target.files[0], 20,20);
    alert('the image is drawn');
}
</script>
</head>
<body>
<h1>Test</h1>
<input type="file" id="input"/>
<canvas width="400" height="300" id="canvas"/>
</body>
</html>

InformationsquelleAutor der Frage Jonas | 2011-07-21

  1. 59

    Haben Sie eine File Instanz, die kein Bild ist.

    To get Inhalt von einem File verwenden Sie eine FileReader. Dann übergeben Sie den Inhalt in ein Image Instanz, die gezeichnet werden können, die auf eine Leinwand: http://jsfiddle.net/t7mv6/.

    Bekommen ein Bild, verwenden Sie new Image(). Die src werden muss eine URL verweisen, auf der ausgewählte File. Sie können URL.createObjectURL um eine URL verweisen, auf eine Blob (a File ist auch ein Blob): http://jsfiddle.net/t7mv6/86/.

    var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image;
img.onload = function() {
    ctx.drawImage(img, 20,20);
    alert('the image is drawn');
}
img.src = URL.createObjectURL(e.target.files[0]);

    Hinweis: sicher sein, zu widerrufen und die Objekt-url, wenn Sie fertig sind mit es, sonst wirst du ein Speicherleck. Wenn Sie nicht tun, nichts zu verrückt ist, können Sie nur kleben Sie ein URL.revokeObjectURL(img.src) im img.onload Funktion.

    Referenzen:

    InformationsquelleAutor der Antwort pimvdb

  2. 11

    Live-Beispiel

    function handleFiles(e) {
    var ctx = document.getElementById('canvas').getContext('2d');
    var url = URL.createObjectURL(e.target.files[0]);
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 20, 20);    
    }
    img.src = url;   
}

    Fenster.URL.createObjectUrldocs

    Können Sie auch das FileReader statt das Objekt zu erstellen URL.

    Den FileReader hat etwas bessere browser-Unterstützung.

    Den FileReader Ansatz funktioniert in FF6 /Chrom. Ich bin mir nicht sicher, ob die Einstellung Img.src zu einem Blob ist Valide und cross-browser aber.

    Erstellen von Objekt-urls ist der richtige Weg, es zu tun.

    Edit:

    Wie gesagt in den commment window.URL support während der offline scheint nicht in FF6/Chrom.

    InformationsquelleAutor der Antwort Raynos

  3. 2

    Hier ist ein komplettes Beispiel (Fiddle) mit FileReader (das bessere browser-Unterstützung wie bereits erwähnt durch Raynos). In diesem Beispiel habe ich auch skalieren Leinwand zu passen, das Bild.

    Im realen Leben Beispiel könnten Sie das Bild skalieren, um einige maximal, so dass Ihre form nicht sprengen ;-). Hier ist ein Beispiel mit Skalierung (Fiddle).

    InformationsquelleAutor der Antwort Nux

Schreibe einen Kommentar