Javascript Girl
  1. Javascript Girl
  3. Copier le canevas via toDataURL après l'opération de tirage ne fonctionne pas
Intereting Posts
Vérifiez si Java est installé à partir de Node.js AngularJS: Comment résoudre "Tenter d'utiliser une valeur dangereuse dans un contexte sécurisé"? Html2canvas sauvegarde en jpeg sans ouverture dans le navigateur Format de devise en utilisant javascript Transition Parallax avec rebond subtil entre deux ancres / divs Boîte de soulignement jqMath comme bbox dans MathJax / MathJs Les propriétés d'objet Javascript sont-elles attribuées dans l'ordre? Pourquoi un résultat varie-t-il en fonction du placement en breloque? Comment écrire une directive 'double' et 'ntimes' pour angularjs? Reactive-redux réacteur-routeur magasin pas disponible dans les accessoires Gestion des plugins jQuery Charger la page en sélection de la liste déroulante Modifier l'énoncé dans Jquery et List Range l'objet avec JSON Comment puis-je attraper l'erreur jQuery $ .getJSON (ou $ .ajax avec le type de données sur 'jsonp') lors de l'utilisation de JSONP?

Copier le canevas via toDataURL après l'opération de tirage ne fonctionne pas

J'essaie de copier le contenu d'une toile vers une autre avec ce code: 

generateThumbnail: function(i) { var thumbnailImage = new Image(); thumbnailImage.src = $("canvas")[i].toDataURL(); var thumbnailCanvas = $("#thumbnail")[0]; var ctx = thumbnailCanvas.getContext("2d"); ctx.drawImage(thumbnailImage, 0, 0); }

Cela fonctionne, mais pas si je viens de terminer une opération de dessin (par exemple, le remplissage de ligne). Si je viens de terminer une opération de tirage, il ne fait rien lors de la première exécution, mais si je l'appelle une deuxième fois, cela fonctionne. Cela semble très étrange, et je ne doute pas pourquoi cela se produit.

C'est comme si la toile se trouvait dans une sorte d'état non valide d'où elle ne peut être lue ou quelque chose.

Le code qui trace la ligne est ici: 

 eraseLine: function(o) { var c = this.context; var lineWidth = o.radius * 2; // Stroke Line if (this.stroke) { c.lineWidth = lineWidth + 4; c.globalCompositeOperation = 'source-atop'; c.strokeStyle = this.strokeColor; c.beginPath(); c.moveTo(o.x0, o.y0); c.lineTo(o.x1, o.y1); c.stroke(); } // Erase Line c.lineWidth = lineWidth; c.lineCap = 'round'; c.strokeStyle = 'rgba(255, 255, 255, 1)'; c.globalCompositeOperation = 'destination-out'; c.beginPath(); c.moveTo(o.x0, o.y0); c.lineTo(o.x1, o.y1); c.stroke(); c.globalCompositeOperation = 'source-over'; }

J'ai testé ceci sur Chrome 11 et Firefox 5, et cela arrive sur les deux. Des idées pour lesquelles cela se produit?

Pouvez-vous essayer cela? 

 generateThumbnail: function(i) { var thumbnailImage = new Image(); thumbnailImage.onload = function() { var thumbnailCanvas = $("#thumbnail")[0]; var ctx = thumbnailCanvas.getContext("2d"); ctx.drawImage(thumbnailImage, 0, 0); } thumbnailImage.src = $("canvas")[i].toDataURL(); }

Il semble que le chargement de cette image dure plus longtemps après avoir effectué une opération de dessin. L'image n'est donc pas chargée lorsque vous exécutez la commande drawImage . La deuxième fois que vous appelez cette fonction, l'image semble se charger plus rapidement. Quoi qu'il en soit, vous devez toujours utiliser l'événement Onload lorsque vous chargez une image.