CODEWITHSUNDEEP
htmlcsswebrotationlandscape
Zackline
Zackline

Reputation: 834

How to display image landscape

I have a website which targets mobile phones, if a user clicks on a 16:9 scaled responsive image, I want clicked image to be displayed landscape, so that the user can rotate his phone to view the image in full size. I can't save the image rotated because it is an external resource. Is there any way I can achieve the desired effect?

I can't simply rotate 90° because that would rotate the scaled image. If I rotate the unscaled image, it extends the portrait viewport to landscape width and displays the rotated image centered.

I already tried using a canvas, but it didn't nearly fit my needs, the image gets destroyed by bad downscaling on Firefox using JSFiddle while it didn't display at all on the Intel XDK emulator.

Since my scenario doesn't seem that uncommon to me, I'm wondering whether I missed an easy solution.

Upvotes: 0

Views: 1016

Answers (1)

Sagi Levi
Sagi Levi

Reputation: 305

Found a jsfiddle doing that, and made it simpler for you.

Check it out: http://jsfiddle.net/7fw66/39/

html:

<div>
  <canvas id="canvas"><img id="image" src="http://3.bp.blogspot.com/-JhISDA9aj1Q/UTECr1GzirI/AAAAAAAAC2o/5qmvWZiCMRQ/s1600/Twitter.png" /></canvas>
</div>

javascript:

var screenwidth = 400;
var imgurl = "http://3.bp.blogspot.com/-JhISDA9aj1Q/UTECr1GzirI/AAAAAAAAC2o/5qmvWZiCMRQ/s1600/Twitter.png";

$(document).ready(function () {
  loadImage();
  $('#restore').click(function () {
    loadImage();
  });
  $('#rotate_ccw').click(function () {
    rotate_ccw();
  });
  $('#rotate_cw').click(function () {
    rotate_cw();
  });
});

function loadImage() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.setTransform(1, 0, 0, 1, 0, 0);

  var img = new Image();
  if (imgurl == null || imgurl == "") {
    imgurl = defaultimgurl;
  }
  img.src = imgurl;

  var maxsize = screenwidth;
  var w = maxsize;
  var ratio = (img.width / w);
  var h = (img.height / ratio);
  canvas.width = w;
  canvas.height = h;

  img.onload = function () {
    ctx.drawImage(img, 0, 0, w, h);
  };

  ctx.save();
}
function rotate_cw() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  var img = new Image();
  img.src = imgurl;

  var maxsize = screenwidth;
  var w = maxsize;
  var ratio = (img.width / w);
  var h = (img.height / ratio);
  canvas.width = h;
  canvas.height = w;

  ctx.translate(w - h, w);
  ctx.rotate((-90 * Math.PI) / 180);
  ctx.translate(0, -(w - h));
  ctx.drawImage(img, 0, 0, w, h);

  ctx.save();
}

function rotate_ccw() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  var img = new Image();
  img.src = imgurl;

  var maxsize = screenwidth;
  var w = maxsize;
  var ratio = (img.width / w);
  var h = (img.height / ratio);
  canvas.width = h;
  canvas.height = w;

  ctx.translate(h, 0);
  ctx.rotate((90 * Math.PI) / 180);
  ctx.drawImage(img, 0, 0, w, h);
  ctx.save();
}

function urlProvided() {
  var userinput = document.getElementById('imageurl');
  imgurl = userinput.value;
  loadImage();
}

Upvotes: 1

Related Questions