Is it possible to rotate an image if you only have image data url using javascript?

Question

I have a problem where I need to rotate an image but I only have the image data url available.

What I need to do is rotate the image first and then load it in the canvas, and I can't rotate the image after loading it in the canvas.

Is it possible to rotate image if you only have the image data url.

Answer 1

There is a simple function to rotate the data URL image. It works even if your image has a width and height that do not equal like in nicael answer.

var src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/wAALCAAmACgBAREA/8QAGQAAAgMBAAAAAAAAAAAAAAAABggAAwcJ/8QAKRAAAQMDAwMEAgMAAAAAAAAAAQIDBAAFEQcSIQYTMTJBUYEUoSIjkf/aAAgBAQAAPwDpRVUuWzAjOSJDqWWGxuW4s4CRQDK1usTc5Edht99BWEqkKGxtIz5+cfVH8eQ1LYQ8w4l1lwbkrQchQ+QasqUAa2vdvolSd+0rkNjGfUOTS/Uweijxc6HbSV7tj7iQM52jg4o9qUE6vWJd66PeW0krehqEhKR7gcK/RJ+qXWmN0ksSrJ0bHLgKXpajIUD7A+n9Af7RnVUmUzDZU8+6hlpPKluKCQPs1l2ouq9tds8q22h5UmQ8O2p9Kf60pPqwT5OOOKxWtw0/1XtZtEK3XR8xJbKA13XE4bUBwnkeOMea0xh9qS0l1lxLrahlK0KBB+6XjVq9TZ/WE+I8+tUWMsIaZz/FPAOcfPPmgqpUo+0cvU2J1bGgofX+HISvuMk5SSEkggex4r//2Q=="

var img_src = document.createElement('img')
img_src.src = src
document.getElementById('container').appendChild(img_src)


rotate90(src,function(res){
   var img_res = document.createElement('img')
   img_res.src = res
   document.getElementById('container').appendChild(img_res)
})

function rotate90(src, callback){
  var img = new Image()
  img.src = src
  img.onload = function() {
    var canvas = document.createElement('canvas')
    canvas.width = img.height
    canvas.height = img.width
    canvas.style.position = "absolute"
    var ctx = canvas.getContext("2d")
    ctx.translate(img.height, img.width / img.height)
    ctx.rotate(Math.PI / 2)
    ctx.drawImage(img, 0, 0)
    callback(canvas.toDataURL())
  }
}

<div id="container"></div>

Also, you can try it here

Answer 2

Yes, it is.

var canvas = document.createElement('canvas');

canvas.width="1000"; //specify width of your canvas
canvas.height="1000"; //specify height of your canvas
var img = document.createElement("img"); 
img.src = "image.png"; //specify url

var ctx = canvas.getContext("2d");

ctx.rotate(90 * Math.PI/180); // rotate by 90 degrees
ctx.drawImage(img,100,100); //draw it
ctx.fill();
document.body.appendChild(canvas); // display it!