Javascript Girl
  1. Javascript Girl
  3. Effacez la toile et économisez la toile
Intereting Posts
Pourquoi mon onglet ExtJS ne montrera-t-il pas d'éléments avec une disposition de bordure Création d'un écran de démarrage à l'aide de ng-cloak Comment créer facilement Gingub friendly markdown pour les fonctions JavaScript documentées? Le fichier reçoit // // sourceMappingURL mais il en a déjà un Qu'est-ce que des sites Web comme YouTube utilisent pour changer l'URL sans avoir recours à la popstate ou avant la charge? Ajout de points à l'API Google Map Appeler une fonction par nom qui ne fait pas partie de la portée globale Évitez les erreurs d'ombre sans ombre avec mapDispatchToProps Changer la taille de l'image avec JavaScript Les littéraux de modèle ES6 sont-ils plus rapides que la concaténation de chaînes? Comment définir la largeur d'un div en pourcentage en JavaScript? L'expression régulière s'arrête après le premier match Impossible de capturer Google Map avec html2canvas Phonegap – Comment puis-je télécharger un fichier audio après l'enregistrement avec Media.startRecord de Phonegap Placez les modèles de JavaScript côté client en HTML ou JavaScript?

Effacez la toile et économisez la toile

Je suis en train de terminer l'application Web pour l'analyse de l'image et la peinture. Et j'ai besoin d'aide avec une toile. C'est ce que je fais:

MODIFIER: 

<img id="imgEdit" src="<?php echo $imagename; ?>" border="0"> <canvas id="canvasPaint" width="<?php echo $width; ?>" height="<?php echo $height; ?>"> </canvas> <input type="button" value="Clear" onClick="clearCanvas();" class="button"> <input type="button" value="Save" onClick="saveViaAJAX();" class="button"> <div id="debugFilenameConsole">Wait for a while after clicking the button and the filename of the image will be shown to you. </div>

Mais maintenant j'ai un problème avec la fonction clearCanvas. Parce que les navigateurs ne peuvent pas lire la "largeur" ​​de la propriété. C'est mon code source complet. Comment, s'il vous plaît, quelqu'un peut-il dire à moi ce que je fais mal.

MODIFIER: 

 function clearCanvas() { var theCanvas = document.getElementById("canvasPaint"); if (theCanvas && theCanvas.getContext) { var ctx = theCanvas.getContext("2d"); if (ctx) { ctx.clearRect(0, 0, <?php echo $width; ?>, <?php echo $height; ?>); var srcImg = document.getElementById("imgEdit"); ctx.drawImage(srcImg, 0,0); clickX = new Array(); clickY = new Array(); clickDrag = new Array(); }}} function saveViaAJAX() { var theCanvas = document.getElementById("canvasPaint"); var canvasData = theCanvas.toDataURL("image/jpg"); var postData = "canvasData="+canvasData; var ajax = new XMLHttpRequest(); ajax.open("POST",'canvasSave.php',true); ajax.setRequestHeader('Content-Type', 'canvas/upload'); ajax.send(postData); }

J'ai besoin d'enregistrer la toile comme image jpeg sur le disque local après l'utilisateur, cliquez sur 'Enregistrer l'image'. C'est méchant, les zones transparentes en toile deviennent des fond noir.

J'ai besoin de quelque chose comme ça: http://i48.tinypic.com/2w5vhpv.jpg

Vous pouvez sauvegarder la toile sur un fichier image avec canvas.toDataUrl('image/jpg') .

En ce qui concerne la première question: normalement, vous effacez la toile avec la méthode context.clearRect(0, 0, canvas.width, canvas.height) . Cela étant dit, votre code devrait fonctionner comme prévu si la toile et les déclarations de contexte ont été effectuées correctement.