javascript - Problèmes de traitement des images sur le canevas

Question

Je dois utiliser Canvas pour traiter une image téléchargée par l'utilisateur. La taille téléchargée par l'utilisateur peut être très grande, par exemple, elle dépassera la largeur et la hauteur de la fenêtre actuelle du navigateur, je la redimensionne donc proportionnellement au visible. zone du navigateur. Dessinez-le ensuite sur le canevas, mais cela équivaut à réduire l'image de l'utilisateur. Une fois le canevas traité, existe-t-il un moyen de restaurer l'image traitée à sa taille d'origine sans provoquer de flou ?

Je suis vraiment convaincu. Qui donnera un coup de pouce à Gu Yue et Jack ? Ce qu’ils ont dit est la bonne méthode !

Answer 1

La largeur et la hauteur de la toile sont définies de manière identique à la taille d'origine de l'image, mais le style est utilisé pour redimensionner la toile à la zone visible. De cette façon, l'image ne sera pas compressée

Answer 2

Merci pour l’invitation. Même si j’aimerais vous répondre, je ne l’ai pas essayé, donc je ne sais pas. Bien sûr, vous pouvez l’essayer vous-même, de toute façon, cela ne prendra pas beaucoup de temps.
Mais nous pouvons changer notre façon de penser. Pourquoi voulez-vous réduire l'image et la dessiner sur toile ?
N'est-il pas possible de redimensionner l'image à la zone visible sans largeur maximale ni hauteur maximale ? Il s'agit simplement de l'image réduite en surface. En fait, naturalWidth et naturalHeight n'ont pas changé, la restauration du zoom est donc inutile.
Vous pouvez utiliser img pour afficher dans la zone visible du navigateur. N'utilisez pas canevas. Canvas est utilisé pour traiter les images. Si vous devez afficher l'image en cours de traitement par le canevas, vous pouvez simplement créer un autre canevas hors écran, puis redimensionner proportionnellement le traitement associé et enfin enregistrer le canevas hors écran.
Je ne sais pas si j’ai été clair.

Answer 3

Prétraitement du téléchargement d'images HTML5 https://juejin.im/entry/5933e...