Télécharger l’image sur canvas à l’aide de JS Jquery

J’essaie de télécharger une image de canvas sur le bureau à l’aide du code suivant:

 var canvas; $(document).ready(function() { if ($('#designs-wrapper').length) { $('.design').each(function() { var design = $(this).attr('data-design'); var canvas = $(this).find('canvas')[0]; var ctx = canvas.getContext('2d'); var img = new Image; img.onload = function() { ctx.drawImage(this, 0, 0); }; img.src = design; }); } $('#canvas').click(function() { this.href = canvas.toDataURL(); this.download = 'design.png'; }); });  

Malheureusement, j’obtiens l’erreur suivante:

Uncaught TypeError: impossible de lire la propriété ‘toDataURL’ of undefined

Quelqu’un at-il une idée de comment résoudre ce problème?

• Dimensionnement standard pour les images de curseur de navigateur croisées? jquery changement des images du curseur
• Comment publier immédiatement après la conversion de svg to canvas?
• Connecter des éléments avec la même classe en utilisant canvas
• Toile pour enregistrer l’image et le courrier électronique
• KineticJS – Dessinez gratuitement avec la souris

Aperçu en direct: http://dane.helpful.ninja/fds/index.php?username=z-justin

Introductions: 1) Cliquez sur une image 2) Voir la console de développement

MODIFIER:

Après avoir mis à jour le code comme suit:

Définir le canevas dans la scope globale Supprimer var de var canvas = $(this).find('canvas')[0];

L’erreur suivante apparaît:

Uncaught SecurityError: Impossible d’exécuter ‘toDataURL’ sur ‘HTMLCanvasElement’: les canevas souillées ne peuvent pas être exscopes.

• Comment dessiner Angle entre deux lignes en javascript
• Toile noire et blanche en forme
• Comment convertir une div d’une page HTML en image sans utiliser Canvas?
• Ajouter une div contenant une canvas ne fonctionne pas
• Générer et télécharger une capture d’écran de la page Web sans perdre les styles