如何顯示圖像風景

我有一個網站，其目標是手機，如果用戶點擊16：9縮放響應圖像，我想點擊圖像顯示風景，以便用戶可以旋轉他的手機查看全尺寸圖像。我無法保存旋轉的圖像，因爲它是外部資源。有什麼辦法可以達到預期效果嗎？如何顯示圖像風景

我不能簡單地旋轉90°，因爲這會旋轉縮放的圖像。如果我旋轉未縮放的圖像，它將縱向視口擴展到橫向寬度並顯示居中的旋轉圖像。

我已經嘗試過使用畫布，但它幾乎不符合我的需求，圖像被使用JSFiddle的Firefox上的縮小比例壞掉，而在Intel XDK模擬器上根本沒有顯示。

由於我的情況對我來說似乎並不罕見，所以我想知道我是否錯過了一個簡單的解決方案。

來源

2015-12-01 Zackline

發現了一個jsfiddle這樣做，並使它更簡單。

檢查出來：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(); 
}

來源

2015-12-01 20:08:06

如何顯示圖像風景

回答

相關問題