1

I am trying to rotate a base 64 image 90 deg but am not able to do it. I want to rotate it before I pass it to an image component. I have an image stored but it is in base64 and I have to pass it to another page to a component but before doing so I have to rotate it 90 degrees.

I can rotate the image inside the component using styling such that it will rotate 90 degree=> transform: 'rotate(90deg)'

but I want to rotate the image and then pass it to the component.

I tried using the code from another similar problem in stackoverflow using javascript. but it wouldnt work.

Sample image string


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

Expected result: I want the image to be rotated by 90 degrees by using code.

Actual result: I am not able to rotate it at all.

Harry
  • 389
  • 1
  • 6
  • 18
  • What have you tried? Do you have some code? – J. Stott Jul 30 '19 at 10:36
  • https://stackoverflow.com/a/17043361/11368483 – red Jul 30 '19 at 10:37
  • 1
    I have tried to rotate it using css that is transform .. rotate property, but that is in the component. I want to rotate using code and then pass it to image component. this is a base64 image. so I just want to know how to rotate it by 90 degrees. so no code. and thank you scott for trying to help me – Harry Jul 30 '19 at 10:39
  • @red I have already tried that solution, it doesn't work in reactjs and it uses canvas. thank you for trying to help – Harry Jul 30 '19 at 10:41
  • Be sure to get a reference to your canvas element, there is no reason the link would not work in reactjs – gcasar Jul 30 '19 at 10:45
  • it returns getContext as null because canvas doesn't load before code I think, so it doesn't work – Harry Jul 30 '19 at 10:47
  • https://blog.cloudboost.io/using-html5-canvas-with-react-ff7d93f5dc76 I suggest you look at this – gcasar Jul 30 '19 at 11:40
  • thank you greg, will look into it – Harry Jul 30 '19 at 11:45

3 Answers3

2

Image processing in javascript can be done using canvas element. To solve your problem, you need to rotate your image and result in a new image. To get help from canvas to do that, we can follow simple algorithm

  • get original image base64 code
  • create in-fly image from that code using Image constructor
  • create in-fly canvas and get its context
  • Now we need to get the maximum dimension to overcome edge cover as we need to do transformation for our canvas
  • we have special case for rotation with 90, 270 deg as this will inverse width with height, so we need to handle that
  • do transformation for the canvas to cover image after rotate
  • rotate the canvas, and return its content as base64
  • load the image and send the result in the callback
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"))
            };
}
Mojahed Elbakre
  • 81
  • 3
  • This solution is work unless you are not plan to use canvas. – Mojahed Elbakre Jul 30 '19 at 17:46
  • You should explain a little more your answer. Just from this it's really hard to tell how or why your answer works. – ifconfig Jul 30 '19 at 18:10
  • While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Dharman Jul 30 '19 at 22:47
  • hmmm, ok. Done! – Mojahed Elbakre Jul 31 '19 at 12:27
0

To achieve what you're describing you'd need to render the image to a canvas, rotate it and than call canvas.toDataURL("image/png"). This will present a significant overhead...

I suggest you solve this by making a RotatedComponent that wraps with a css transformation as you suggested.

If you still want to do it:

gcasar
  • 729
  • 1
  • 9
  • 22
  • is there no other way than using a canvas? I am storing the string in an array , but dont know how to rotate it – Harry Jul 30 '19 at 10:44
  • Not that I know of short of parsing the png data yourself. If this was a bmp it would be trivial, but png is compressed. – gcasar Jul 30 '19 at 10:48
  • oh, thank you Greg. I really just want to rotate it 90 degrees before passing it to a component. as once it is in component it doesn't act the way I want it. so I have to rotate it before it reaches the component. – Harry Jul 30 '19 at 10:51
0

If you do not want to use a canvas, you can pass the whole image with style to your component, eg:

<MyComponent
  img={
    <img src={myBase64Img} style={{ transform: 'rotate(90deg)'}} />
  }
/>
Mosè Raguzzini
  • 15,399
  • 1
  • 31
  • 43
  • I already tried this and it rotates on viewing it but I want to save it as a rotated file. rotating it on the component is not giving me the result I want. Thank you Mose for trying to help me. really appreciate it. – Harry Jul 30 '19 at 10:57
  • If you want to save it as rotated, canvas is the most viable way and it's how is done in 100% on FE env I've seen – Mosè Raguzzini Jul 30 '19 at 10:58
  • 1
    The canvas can be offscreen (you don't have to render it to screen to get the rotated image and send it to the server) – Mosè Raguzzini Jul 30 '19 at 10:58
  • canvas way is given in this solution stackoverflow.com/a/17043361/11368483 . and I tried it, but it is returning getcontext as null, and I don't know why. that's why I stopped approaching it that way and that solution is written for jquery code not reactjs – Harry Jul 30 '19 at 11:03
  • 1
    @Harry, nothing stops your from using jQuery with reactjs. By the way, there's no other way you can rotate the image but canvas – lucifer63 Jul 30 '19 at 11:27