1
votes

Comment faire pivoter une image base64 dans reactjs avant de la passer dans un composant?

J'essaie de faire pivoter une image de base 64 de 90 degrés mais je ne parviens pas à le faire. Je veux le faire pivoter avant de le transmettre à un composant d'image. J'ai une image stockée mais elle est en base64 et je dois la transmettre à une autre page à un composant, mais avant de le faire, je dois la faire pivoter de 90 degrés.

Je peux faire pivoter l'image à l'intérieur du composant en utilisant un style tel qu'il tournera de 90 degrés => transform: 'rotate (90deg)'

mais je veux faire pivoter l'image puis la transmettre au composant.

J'ai essayé d'utiliser le code d'un autre problème similaire dans stackoverflow en utilisant javascript . mais cela ne fonctionnerait pas.

Exemple de chaîne d'image

data:image/png;base64,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

Résultat attendu: je veux que l'image pivote de 90 degrés en utilisant du code. p >

Résultat réel: je ne parviens pas du tout à le faire pivoter.

javascript reactjs html css

8 commentaires

Qu'avez-vous essayé? Avez-vous du code?

stackoverflow.com/a/17043361/11368483

J'ai essayé de le faire pivoter en utilisant css qui est la propriété de transformation .. rotate, mais c'est dans le composant. Je veux faire pivoter à l'aide du code, puis le transmettre au composant d'image. ceci est une image base64. donc je veux juste savoir comment le faire pivoter de 90 degrés. donc pas de code. et merci Scott d'avoir essayé de m'aider

@red J'ai déjà essayé cette solution, elle ne fonctionne pas dans reactjs et elle utilise canvas. merci d'essayer d'aider

Assurez-vous d'obtenir une référence à votre élément de canevas, il n'y a aucune raison pour que le lien ne fonctionne pas dans reactjs

il renvoie getContext comme null parce que le canevas ne se charge pas avant le code, je pense, donc cela ne fonctionne pas

blog.cloudboost.io/using-html5-canvas-with-react- ff7d93f5dc7‌ 6 Je vous suggère de regarder ceci

merci Greg, va l'examiner

3 Réponses :

0
votes

Pour obtenir ce que vous décrivez, vous devez rendre l'image sur un canevas , le faire pivoter et appeler canvas.toDataURL ("image / png") . Cela présentera une surcharge importante ...



 Je vous suggère de résoudre ce problème en créant un  RotatedComponent  qui se termine par une transformation css comme vous l'avez suggéré. 

 Si vous souhaitez toujours le faire: 


  Image de base64  
  Faire pivoter le contexte  
  Dessiner une image  
  Extraire l'image



                                                                    
                                    
                                    
                                        3 commentaires
                                        
                                                                                            
                                                    n'y a-t-il pas d'autre moyen que d'utiliser une toile? Je stocke la chaîne dans un tableau, mais je ne sais pas comment la faire pivoter                                                
                                                
                                                                                            
                                                    Non pas que je sache à court d'analyser les données png vous-même. Si c'était un bmp, ce serait trivial, mais le png est compressé.                                                
                                                
                                                                                            
                                                    oh, merci Greg. Je veux vraiment le faire pivoter de 90 degrés avant de le passer à un composant. car une fois qu'il est en composant, il n'agit pas comme je le souhaite. je dois donc le faire pivoter avant qu'il n'atteigne le composant.


                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Si vous ne souhaitez pas utiliser de  canevas , vous pouvez transmettre l'image entière avec style à votre composant, par exemple: 
<MyComponent
  img={
    <img src={myBase64Img} style={{ transform: 'rotate(90deg)'}} />
  }
/>  

                                

                                                                    
                                    
                                    
                                        5 commentaires
                                        
                                                                                            
                                                    J'ai déjà essayé cela et il tourne en le visualisant mais je veux l'enregistrer en tant que fichier pivoté. le faire pivoter sur le composant ne me donne pas le résultat que je souhaite. Merci Mose d'avoir essayé de m'aider. j'apprécie beaucoup.                                                
                                                
                                                                                            
                                                    Si vous voulez l'enregistrer comme pivoté, le canevas est le moyen le plus viable et c'est ainsi que se fait à 100% sur FE env que j'ai vu                                                
                                                
                                                                                            
                                                    Le canevas peut être hors écran (vous n'avez pas besoin de le rendre à l'écran pour obtenir l'image pivotée et l'envoyer au serveur)                                                
                                                
                                                                                            
                                                    canvas way est donné dans cette solution stackoverflow.com/a/17043361/11368483. et je l'ai essayé, mais il renvoie getcontext comme nul, et je ne sais pas pourquoi. c'est pourquoi j'ai arrêté de l'aborder de cette façon et cette solution est écrite pour le code jquery et non pour reactjs                                                
                                                
                                                                                            
                                                    @Harry, rien ne vous empêche d'utiliser jQuery avec reactjs. Au fait, il n'y a pas d'autre moyen de faire pivoter l'image que la toile                                                
                                                
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    2
 votes
                                
                            
                            
                                
                                     Le traitement d'image en javascript peut être effectué à l'aide de l'élément canvas. Pour résoudre votre problème, vous devez faire pivoter votre image et créer une nouvelle image. Pour obtenir de l'aide de canvas pour ce faire, nous pouvons suivre un algorithme simple 

 obtenir le code base64 de l'image d'origine 
 créer une image à la volée à partir de ce code à l'aide du constructeur d'image 
 créer un canevas à la volée et obtenir son contexte 
 Nous devons maintenant obtenir la dimension maximale pour surmonter la couverture des bords car nous devons effectuer la transformation de notre canevas 
 nous avons un cas spécial pour la rotation à 90, 270 degrés car cela inversera la largeur avec la hauteur, nous devons donc gérer cela 
 effectuer une transformation pour que le canevas recouvre l'image après la rotation 
 faire pivoter le canevas et renvoyer son contenu en base64 
 charger l'image et envoyer le résultat dans le rappel 
function rotateImage(imageBase64, rotation, cb) {
           var img = new Image();
            img.src = imageBase64;
            img.onload = () => {
              var canvas = document.createElement("canvas");
              const maxDim = Math.max(img.height, img.width);
              if ([90, 270].indexOf(rotation) > -1) {
                canvas.width = img.height;
                canvas.height = img.width;
              } else {
                canvas.width = img.width;
                canvas.height = img.height;
              }
              var ctx = canvas.getContext("2d");
              ctx.setTransform(1, 0, 0, 1, maxDim / 2, maxDim / 2);
              ctx.rotate(90 * (Math.PI / 180));
              ctx.drawImage(img, -maxDim / 2, -maxDim / 2);
              cb(canvas.toDataURL("image/jpeg"))
            };
}

                                

                                                                    
                                    
                                    
                                        4 commentaires
                                        
                                                                                            
                                                    Cette solution fonctionne à moins que vous ne prévoyiez pas d'utiliser canvas.                                                
                                                
                                                                                            
                                                    Vous devriez expliquer un peu plus votre réponse. Rien qu'à partir de cela, il est vraiment difficile de dire comment ou pourquoi votre réponse fonctionne.                                                
                                                
                                                                                            
                                                    Bien que ce code puisse résoudre la question,  y compris une explication  sur comment et pourquoi cela résout le problème aiderait vraiment à améliorer la qualité de votre post, et entraînera probablement plus de votes positifs. N'oubliez pas que vous répondez à la question des lecteurs à l'avenir, pas seulement à la personne qui la pose maintenant. Veuillez  modifier  votre réponse pour ajouter des explications et donner une indication des limitations et hypothèses applicables.                                                
                                                
                                                                                            
                                                    Hmmm d'accord. Fait!


            
                
		    
                    Articles qui pourrait vous intéresser :
                                            
                            Impossible d'importer le module "@ angular / material"                        
                        
                                            
                            Interaction profonde avec break and catch                        
                        
                                            
                            Utilisation de node.js comment renommer tous les fichiers d'un dossier                        
                        
                                            
                            Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO