web-dev-qa-db-de.com

Kann ich ein Bild von einem Canvas-Element erhalten und es im img src-Tag verwenden?

Gibt es die Möglichkeit, das in einem Canvas-Element vorhandene Bild in ein durch img src dargestelltes Bild zu konvertieren?

Ich brauche das, um ein Bild nach einer Transformation zu beschneiden und zu speichern. Es gibt eine Ansichtsfunktion, die ich im Internet gefunden habe, wie zum Beispiel: FileReader() oder ToBlop(), toDataURL(), getImageData(), aber ich habe keine Ahnung, wie ich sie richtig implementieren und verwenden soll JavaScript.

Das ist mein HTML:

<img src="http://picture.jpg" id="picture" style="display:none"/>
<tr>
    <td>
        <canvas id="transform_image"></canvas>
    </td>
</tr>
<tr>
    <td>
        <div id="image_for_crop">image from canvas</div>
    </td>
</tr>

In JavaScript sollte es ungefähr so ​​aussehen:

$(document).ready(function() {
    img = document.getElementById('picture');
    canvas = document.getElementById('transform_image');

    if(!canvas || !canvas.getContext){
        canvas.parentNode.removeChild(canvas);
    } else {
        img.style.position = 'absolute';
    }
    transformImg(90);
    ShowImg(imgFile);
}

function transformImg(degree) {
    if (document.getElementById('transform_image')) {
        var Context = canvas.getContext('2d');
        var cx = 0, cy = 0;
        var picture = $('#picture');
        var displayedImg = {
            width: picture.width(),
            height: picture.height()
        };   
        var cw = displayedImg.width, ch = displayedImg.height
        Context.rotate(degree * Math.PI / 180);
        Context.drawImage(img, cx, cy, cw, ch);
    }
}

function showImg(imgFile) {
    if (!imgFile.type.match(/image.*/))
    return;

    var img = document.createElement("img"); // creat img object
    img.id = "pic"; //I need set some id
    img.src = imgFile; // my picture representing by src
    document.getElementById('image_for_crop').appendChild(img); //my image for crop
}

Wie kann ich das Canvas-Element in diesem Skript in ein img src-Bild ändern? (Dieses Skript enthält möglicherweise einige Fehler.)

javascripthtml5imagecanvas
53
kassprek

canvas.toDataURL() liefert Ihnen eine Daten-URL , die als Quelle verwendet werden kann:

var image = new Image();
image.id = "pic"
image.src = canvas.toDataURL();
document.getElementById('image_for_crop').appendChild(image);

Siehe auch:

67
Zeta

Mach das. Fügen Sie dies am unteren Rand Ihres Dokuments hinzu, bevor Sie das body-Tag schließen.

<script>
    function canvasToImg() {
      var canvas = document.getElementById("yourCanvasID");
      var ctx=canvas.getContext("2d");
      //draw a red box
      ctx.fillStyle="#FF0000";
      ctx.fillRect(10,10,30,30);

      var url = canvas.toDataURL();

      var newImg = document.createElement("img"); // create img tag
      newImg.src = url;
      document.body.appendChild(newImg); // add to end of your document
    }

    canvasToImg(); //execute the function
</script>

Natürlich brauchen Sie irgendwo in Ihrem Dokument den Canvas-Tag, den es packen wird.

<canvas id="yourCanvasID" />
6
honkskillet

Ich habe zwei Probleme mit Ihrer Fiddle gefunden, eines der Probleme steht an erster Stelle in Zetas Antwort.

die Methode ist nicht toDataUrl(); ist toDataURL(); und Sie haben vergessen, die Zeichenfläche in Ihrer Variablen zu speichern.

Die Fiddle funktioniert nun gut http://jsfiddle.net/gfyWK/12/

Ich hoffe das hilft!

2
limoragni

canvas.toDataURL funktioniert nicht, wenn die ursprüngliche Bild-URL (entweder relativ oder absolut) nicht zu derselben Domäne gehört wie die Webseite. Getestet von einem Bookmarklet und einem einfachen Javascript in der Webseite mit den Bildern . Schauen Sie sich David Walsh an, der Beispiel arbeitet. Legen Sie die HTML-Datei und die Bilder auf Ihrem eigenen Webserver ab, ändern Sie das Originalbild in eine relative oder absolute URL, und ändern Sie es in eine externe Bild-URL. Nur die ersten beiden Fälle funktionieren. 

1
skyrail

Korrektur der Fiddle - aktualisiert zeigt das in den Canvas kopierte Bild ...

Ein Rechtsklick kann als .PNG gespeichert werden

http://jsfiddle.net/gfyWK/67/

<div style="text-align:center">
<img src="http://imgon.net/di-M7Z9.jpg" id="picture" style="display:none;" />
<br />
<div id="for_jcrop">here the image should apear</div>
<canvas id="rotate" style="border:5px double black; margin-top:5px; "></canvas>
</div>

Plus die JS auf der Geigenseite ...

ProstSi 

Momentan beim Speichern dieser Datei auf dem Server --- ASP.net C # (.aspx-Webformularseite) Jeder Hinweis wäre cool.

0
Si Simon