HTML5 Canvas outil gomme sans découvert la couleur blanche
J'ai de la toile. J'ai des outils de dessin crayon et une gomme. Comment je peux effacer les dessins sans les écraser(à découvert) avec la couleur blanche.
ce mon code gomme à effacer sur le dessin avec la couleur blanche:
http://jsfiddle.net/66z12xb0/
J'ai à l'arrière enregistrer l'image après l'application.
<?php
$images = scandir(ROOT_FS . FINISH_DRAW_PATH, 1);
$imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
$filteredData = substr($imageData, strpos($imageData, ",") + 1);
$unencodedData = base64_decode($filteredData);
$fileName = "photo.png";
$fp = fopen(ROOT_FS . SAVE_DRAW_PATH . $fileName, 'wb');
fwrite($fp, $unencodedData);
fclose($fp);
?>
Ouvrir avec la visionneuse de photos windows et voir ce résultat:
supplémentaires télécharger foto:
$("#upload_foto").click(function() {
var data = canvas.toDataURL('image/png');
var ajax = new XMLHttpRequest();
ajax.open('POST', 'backend.php', false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(data);
});
<button type='button' id='upload_foto'>Upload</button>
OriginalL'auteur Asker | 2014-09-18
Vous devez vous connecter pour publier un commentaire.
Si vous voulez effacer la ligne que vous avez deux options:
ctx.clearRect()
ou de découvert avec une couleur qui correspond à l'arrière-plan,Si vous avez besoin d'avoir une image d'arrière-plan, de sorte qu'il n'est pas possible d'effacer avec une seule couleur, les couches viennent dans maniable comme une solution générale. Si vous décidez d'utiliser des couches je recommande d'utiliser un framework comme paper.js ou kineticJS, ils ont cette fonctionnalité déjà intégrée. Si vous décidez de mettre en œuvre des couches sur votre propre, vous pouvez créer un autre
<canvas>
au-dessus de celui de votre arrière-plan, ou, vous avez besoin de stocker des informations de dessin dans une liste et de les redessiner l'ensemble de la toile à chaque fois.Peut-être que je peux faire de gomme à l'utilisation de l'outil globalCompositeOperation
globalCompositeOperation = 'destination-out'; fillStyle = 'rgba(0,0,0,1)'; strokeStyle = 'rgba(0,0,0,1)';
KineticJS est devenu KonvaJS
OriginalL'auteur philipp