Javascript Girl
  1. Javascript Girl
  3. Redimensionner un canevas HTML en blanc est son contenu
Intereting Posts
Alignement vertical Dois-je valider, désinfecter ou échapper des données lors de l'utilisation de la méthode de construction dans sequelize.js Existe-t-il un moyen de détecter quand un fichier CSS a été entièrement chargé? Comment puis-je arrêter les fuites de mémoire avec des promesses récursives javascript? Téléchargez plusieurs fichiers avec ajaxFileUpload avec différents identifiants de fichiers ScrollTop animation sans jquery Détecter X-Frame-Options Accès au dictionnaire d'aide de modèle dans le gestionnaire d'événements Meteor XMLHttpRequest () & net :: ERR_NAME_NOT_RESOLVED Désactivation des liens dans Android WebView Ng-pattern qui permet des taux décimales Quelle est la différence entre les tableaux condensés et les tableaux littéral? Google API: Origines JavaScript autorisées Suivre les onglets avec knockoutjs + twitter bootstrap Obtenir le compilateur de fermeture et Node.js pour jouer bien

Redimensionner un canevas HTML en blanc est son contenu

J'ai un élément de canevas HTML qui est redimensionné lorsque l'utilisateur redimensionne l'écran. 

canvas.height = pageHeight(); canvas.width = pageWidth();

Le redimensionnement réel fonctionne bien, mais il met en évidence le canevas.

J'aimerais garder le contenu. Existe-t-il une autre méthode pour changer la taille d'un élément de toile, ou existe-t-il un moyen de stocker le contenu et de les ramener à la toile?

Vous devez redimensionner le canevas avec CSS ou redessiner le canevas après le redimensionnement.

Si vous souhaitez enregistrer le contenu du canevas et le redessiner, je peux penser à quelques options:

  1. Utilisez context.getImageData pour saisir le canevas entier, redimensionner le canevas, puis utiliser context.putImageData pour le redessiner à la nouvelle échelle.
  2. Créez un objet Image , définissant la source dans le résultat de canvas.toDataUrl() , redimensionnez le canevas, puis dessinez l'image à la nouvelle échelle.
  3. context.setScale(xscale, yscale) et appelez n'importe quelle fonction que vous avez utilisée pour dessiner la toile à l'origine. En supposant que vous configurez correctement xscale et yscale , cela yscale automatiquement tout à la nouvelle taille.
  4. Créez un nouveau canevas avec la taille mise à jour et le context.drawImage(oldCanvas, ...) pour copier l'ancien canevas sur le nouveau. Ensuite, vous changerez l'ancienne toile avec la nouvelle.

Les deux premières options ne fonctionneront pas si vous avez tracé une image d'un domaine différent sur le canevas à tout moment et ne sont pas prises en charge par d'anciennes implémentations.

À mon avis, l'option 3 (redessiner l'image à la nouvelle échelle) est la meilleure s'il est possible. C'est la seule option qui permettra de garder vos lignes complètement lisses et pointues, et cela fonctionnera toujours (en supposant que vous disposez toujours de toutes les informations pour générer l'image).