Mettre du texte sur une image et l'enregistrer en tant qu'image

J'ai un problème avec HTML5 Canvas.
J'ai une image. Sur cette image que je veux mettre du texte et de l'afficher/enregistrer comme une image.

J'ai ce code:

window.onload = function(){
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var imageObj = new Image();
 imageObj.onload = function(){
     context.drawImage(imageObj, 10, 10);
     context.font = "20px Calibri";
     context.fillText("My TEXT!", 50, 200);
 };
 imageObj.src = "mail-image.jpg"; 
};

Cela fonctionne bien. Il est à mon image et le texte.
Mais c'est toujours une toile et pas d'image.
Quelqu'un peut-il m'aider?

InformationsquelleAutor milan | 2013-09-12
  1. 12

    Pour des raisons de sécurité, il n'y a aucun moyen pratique de l'enregistrement d'un dessin du canevas à l'utilisateur d'un lecteur local.

    Comme une solution de contournement, aller à la "vieille école": Convertir la toile à une image et l'afficher dans une nouvelle fenêtre.

    window.onload = function(){
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var imageObj = new Image();
 imageObj.onload = function(){
     context.drawImage(imageObj, 10, 10);
     context.font = "20px Calibri";
     context.fillText("My TEXT!", 50, 200);

     //open the image in a new browser tab
     //the user can right-click and save that image
     var win=window.open();
     win.document.write("<img src='"+canvas.toDataURL()+"'/>");    

 };
 imageObj.src = "mail-image.jpg"; 
};
    • Merci yout pour beaucoup!!
    • Une question: Est-il possible d'enregistrer cette image automatiquement sur mon serveur?
    • Oui, vous pouvez. C'est une question souvent posée ici sur Stackoverflow...par exemple: stackoverflow.com/questions/13198131/...
    InformationsquelleAutor markE
  2. 5

    Sable de boxe

    Les navigateurs sont de sable-boxed lorsqu'il traite de la sauvegarde du contenu de l'utilisateur du disque dur. C'est pour la sécurité (vous ne voulez pas un mauvais hacker (ou espion) pour remplacer le système de fichiers ou de planter un virus ou une porte dérobée, etc.). Donc, l'accès direct est de prévenir et de stockage local est isolé.

    Vous avez toujours besoin de "pont" le contenu par une interaction de l'utilisateur, qui approuve l'opération et à cet effet, le navigateur va vous demander de choisir un emplacement pour le fichier à afficher une boîte de dialogue pour permettre à l'utilisateur conscient de ce que le navigateur tente de fournir du contenu pour être sauvé (voir démonstration ci-dessous).

    Invoquant la boîte de dialogue enregistrer

    Ici sont un couple de d'autres possibilités pour activer le téléchargement.

    Si un lien pour exemple, dans le cadre de l'image est ok, alors que vous pouvez faire:

    ///create an anchor/link (or use an existing)
var lnk = document.createElement('a');

///set your image as data-uri link
lnk.href = canvas.toDataURL();

///and the key, when user click image will be downloaded
lnk.download = 'filename.png';

///add lnk to DOM, here after the canvas
canvas.parentElement.appendChild(lnk);

    Le téléchargement de l'attribut est une nouvelle fonctionnalité HTML5. Au lieu de "naviguer" à cet emplacement le navigateur affiche une boîte de dialogue enregistrer la place et permettent à l'utilisateur d'enregistrer son contenu sur le disque.

    Vous pouvez également automatiser l'ensemble de la fonctionnalité en cliquant sur la génération d'un événement pour elle.

    Par exemple:

    function download(canvas, filename) {

    if (typeof filename !== 'string' || filename.trim().length === 0)
        filename = 'Untitled';

    var lnk = document.createElement('a'),
        e;

    lnk.download = filename;        
    lnk.href = canvas.toDataURL();  

    if (document.createEvent) {

        e = document.createEvent("MouseEvents");
        e.initMouseEvent('click', true, true, window,
                         0, 0, 0, 0, 0, false, false,
                         false, false, 0, null);

        ///send event            
        lnk.dispatchEvent(e);

    } else if (lnk.fireEvent) {

        lnk.fireEvent("onclick");
    }
}

    Enregistrement de serveur de

    Vous pouvez toujours passer par l'étape de l'enregistrement du fichier sur un serveur. Cependant, vous devrez également passer par le biais de la boîte de dialogue enregistrer l'étape lors de la récupération du fichier à partir du serveur (le dialogue).

    Si vous souhaitez stocker le fichier uniquement être affiché dans le navigateur, c'est parfait.

    Il y a différentes façons de le faire (il existe de nombreuses solutions sur DONC pour cette).

    Local de stockage

    Et une autre option est de placer le fichier dans le navigateur de l'espace de stockage local. Vous avez De Stockage Web, mais c'est très limité (généralement entre 2,5 - 5 mo) et en considérant que chaque char stockées prend deux octets de la mémoire physique est seulement la moitié de celui-ci; il ne peut stocker des chaînes de caractères comme le data-uri et data-uri est d'environ 33% plus grande que le fichier d'origine). Mais si vous enregistrez des petites icônes, les sprites etc. cela pourrait faire.

    En outre, vous pouvez utiliser Indexé DB (et maintenant deprectaed Web SQL) qui peut stocker plus de données et vous pouvez également demander l'autorisation de l'utilisateur pour stocker x mo de dat.

    Il en va de même avec Fichier API (qui est actuellement mis en œuvre dans Chrome). Cela agit plus comme un fichier système et est conçu pour stocker de gros fichiers.

    Ces peut sembler plus complexe si vous n'êtes pas familier avec eux, mais je le mentionne comme des options possibles comme ces vous fait aussi économiser de la bande passante de communication avec un serveur et que vous déplacez le "fardeau" pour le client au lieu du serveur.

    • Merci!!!! Cela fonctionne très bien. J'utilise maintenant ce code: var name = "..."; var canvasData = canvas.toDataURL("image/png"); var ajax = new XMLHttpRequest(); ajax.open("POST",'testSave.php',false); ajax.onreadystatechange = function() { console.log(ajax.responseText); } ajax.setRequestHeader('Content-Type', 'application/upload'); ajax.send("imgData="+canvasData, "nom="+nom); " Mais comment vous pouvez le voir, j'essaie d'envoyer également un nom de variable. Mais cette variable je ne pas obtenir dans la save.php
    • Le code de la Save.php: ` if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) { $données images=$GLOBALS['HTTP_RAW_POST_DATA']; $filteredData=substr($données images, strpos($données images, ",")+1); $unencodedData=base64_decode($filteredData); $nom = $_GET["nom"]; $lien = $nom.".png"; $fp = fopen("$linkname", 'wb' ); fwrite( $fp, $unencodedData); fclose( $fp );} " Pouvez-vous m'aider à obtenir la deuxième variable de nom de fichier?
    • pourquoi ne pas ouvrir une nouvelle question à ce problème spécifique et il y aura une armée d'attente pour l'aide 🙂
    InformationsquelleAutor