web-dev-qa-db-fra.com

Puis-je obtenir l'image de l'élément canvas et l'utiliser dans le tag img src?

Est-il possible de convertir l’image présente dans un élément de toile en une image représentant img src?

J'ai besoin de ça pour rogner une image après une transformation et la sauvegarder. J'ai trouvé sur Internet des fonctions d'affichage telles que: FileReader() ou ToBlop(), toDataURL(), getImageData(), mais je ne sais pas comment les implémenter et les utiliser correctement en JavaScript.

C'est mon 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>

En JavaScript, cela devrait ressembler à ceci:

$(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
}

Comment puis-je changer l'élément canvas en une image img src dans ce script? (Il peut y avoir des bugs dans ce script.)

javascripthtml5imagecanvas
53
kassprek

canvas.toDataURL() vous fournira une adresse de données qui peut être utilisée comme source:

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

Voir également:

67
Zeta

Fais ça. Ajoutez ceci au bas de votre document juste avant de fermer la balise body.

<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>

Bien sûr, quelque part dans votre document, vous avez besoin de la balise canvas qu’elle saisira.

<canvas id="yourCanvasID" />
6
honkskillet

J'ai trouvé deux problèmes avec votre violon, l'un des problèmes est le premier dans la réponse de Zeta.

la méthode n'est pas toDataUrl(); est toDataURL(); et vous avez oublié de stocker le canevas dans votre variable.

Donc, le Fiddle fonctionne maintenant bien http://jsfiddle.net/gfyWK/12/

J'espère que ça aide!

2
limoragni

canvas.toDataURL ne fonctionne pas si l'URL de l'image d'origine (relative ou absolue) n'appartient pas au même domaine que la page Web. Testé à partir d'un bookmarklet et d'un simple javascript dans la page Web contenant les images ..__ Regardez David Walsh qui travaille exemple . Placez le code HTML et les images sur votre propre serveur Web, remplacez l'image d'origine par une URL relative ou absolue, puis par une URL d'image externe. Seuls les deux premiers cas fonctionnent. 

1
skyrail

Corrigé le Fiddle - mis à jour montre l'image dupliquée dans le canevas ...

Et clic droit peut être enregistré en tant que .PNG

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 le JS sur la page de violon ...

Salutations 

Je cherche actuellement à enregistrer ceci dans un fichier sur le serveur --- ASP.net C # (page de formulaire Web .aspx) Un conseil serait génial ....

0
Si Simon