Question

我有一个针对手机的网站，如果用户点击16：9缩放的响应图像，我希望点击的图像显示横向，以便用户可以旋转他的手机以全尺寸查看图像。我无法保存旋转的图像，因为它是外部资源。有什么方法可以达到预期的效果吗？

我不能简单地旋转90°，因为这会旋转缩放的图像。如果我旋转未缩放的图像，它会将纵向视口扩展到横向宽度，并以旋转的图像为中心显示。

我已经尝试过使用画布，但它几乎不能满足我的需求，使用JSFiddle在Firefox上进行不良缩减时图像被破坏，而在英特尔XDK仿真器上根本没有显示。

由于我的情景对我来说似乎并不常见，我想知道我是否错过了一个简单的解决方案。

Answer 1

找到一个jsfiddle这样做，让你更简单。

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();
}

如何显示图像风景

1 个答案: