J'ai cette application de peinture au doigt et je veux que mes utilisateurs puissent enregistrer ce qu'ils dessinent et revenir plus tard et continuer à dessiner.Comment enregistrer un dessin sur toile?
Quelle est la façon la plus légère de faire cela?
Une façon vous pouvez faire est:
Enregistrer le contenu de toile comme codé en base64 image PNG en appelant canvas.toDataURL() et stocker la chaîne codée dans localStorage de la page. Lorsque vous souhaitez restaurer le canevas, vous devez créer une image, définir la valeur src précédemment stockée localement, puis dessiner cette image sur le canevas.
Il existe d'autres méthodes, telles que l'enregistrement de toutes les opérations de dessin, leur stockage local ou dans une session serveur et leur «lecture» lors de la prochaine visite de la page.
bouton Enregistrer HTML:
<input type="button" id="save" value="Save to PNG">
Puis script:
document.getElementById('save').onclick = function() {
window.location = document.getElementById("canvas").toDataURL('image/png');
};
Ensuite, vous aurez à utiliser drawImage de Canevas avec l'image qui a été enregistré. Comment/où vous enregistrez l'image (votre serveur, son dossier de téléchargement) dépend de la manière dont vous voulez le récupérer.
Comment si nous voulons enregistrer dans le dossier en local. Laissez Say C: // Images .. –
vous pouvez utiliser le tissu js. Il a une méthode qui aide sérialiser en JSON et ensuite vous pouvez enregistrer ce JSON dans DB. documentation
Merci, @andrewmu. Que pensez-vous sera plus léger? –
Cela dépend de la complexité du dessin - pour quelques opérations sur une grande toile, stocker les opérations serait plus efficace. Pour un dessin très complexe avec beaucoup d'opérations, il serait préférable de stocker l'image. Je pense globalement que je dirais stocker l'image - il est compressé, si les dessins simples doivent encore être assez petit. – andrewmu