javascript - Comment transformer une image sur toile?

Question

Par exemple, j'ai une photo comme ci-dessous

<img src="image.jpg" width="1280px" height="600px" class="face-image" style="transform: translate(6px, 6px) scale(1.5) rotate(100deg);">

La largeur et la hauteur de l'image sont1280x600,并且transform属性是transform: translate(6px, 6px) scale(1.5) rotate(100deg);

Excusez-moi, comment transformer les paramètres du 1280x600的canvas画布，要怎样才能让图片按照transfrom que j'ai créé sur la toile ?

La taille finale de la toile ne changera pas.

Answer 1

Ces trois API sont disponibles sur l'objet ctx sur canvas. Vous pouvez le vérifier, mais vous devez faire attention à une choseLa transformation de canvas est la transformation d'origine, similaire à la transformation-origin:0,0 dans le CSS. attribut, mais l'attribut de transformation css La valeur par défaut est center centerCela implique donc un problème relativement classique sur le canevas appelé commentcomment déplacer le point d'ancrageEn termes simples, cela se fait en utilisant la valeur négative de la transformation du canevas. Je ne peux pas vous le démontrer en tapant sur un téléphone portable.

Voici une méthode simple pour l'affiche. L'affiche définit également l'origine de la transformation de l'image sur 0,0. À ce moment, les paramètres pour obtenir votre effet précédent seront exactement les mêmes que la valeur du canevas.

Si vous ne comprenez pas l'ordinateur silencieux à l'extérieur, je peux essayer de vous aider à l'implémenter à votre retour. Cependant, dans une perspective de croissance, je vous recommande d'écrire vous-même le code d'implémentation selon le lien ci-dessus

.

Answer 2

https://github.com/wanadev/pe...
démo http://www.html5.jp/test/pers...
Cela peut vous aider

Answer 3

J'ai déjà trouvé la réponse à cette question, merci @foreignerjack pour la réponse
/q/10...