HTML5畫布中的非常高分辨率圖像

在這個問題的最後是SSCCE在HTML5畫布上顯示衛星圖像的24000x12000米勒投影。它有幾個問題：HTML5畫布中的非常高分辨率圖像

而不是在一個屏幕上顯示整個圖像，因爲我只希望顯示一小部分左上角。
將圖像從因爲圖像是非常高的分辨率

enter image description here

使用的圖像可在Wikimedia不應該在顯示的規模出現極端像素化受到影響。我將其更名爲「world.jpg」。
這不是一個普通的Web應用程序，在應用程序執行期間不會下載大圖像，因此任何建議不要求下載這麼大的圖像都沒有意義。
該應用程序將動態縮放到各種地圖區域，從而大圖像大小。
在真實的代碼中，我使用了外部樣式表和JavaScript文件。我將它們整合到僅用於SSCCE的html中。

這是代碼。

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>The Earth</title> 
<script type="text/javascript"> 
function draw() { 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    var map = new Image(); 
    map.src = "world.jpg"; 
    map.onload = function() { 
     var width = window.innerWidth; 
     var height = window.innerHeight; 
     ctx.drawImage(map, 0, 0, width, height); 
    }; 
} 
</script> 
<style> 
html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
} 
#canvas { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    background-color: rgba(0, 0, 0, 0); 
} 
</style> 
</head> 
<body onload="draw();"> 
    <canvas id="canvas"></canvas> 
</body> 
</html>

來源

2014-06-13 KevinRethwisch

你在不同的瀏覽器上試過了嗎？像素化聽起來像瀏覽器代碼中的錯誤或優化。你正在談論一個非常大的圖像（800 MB未壓縮），不同瀏覽器與這些圖像的能力可能會有所不同。 – DrV

Chromium和Ubuntu瀏覽器產生類似的結果。 – KevinRethwisch

這可能是一個非常愚蠢的問題，但你確定你下載了巨大版本的圖像。您的鏈接指向低分辨率預覽。圖像文件應該是20 MiB左右的JPEG格式。 – DrV

使用context.drawImage的是剪輯的版本，並縮放原始圖像：

context.drawImage(
    sourceImage, 
    clipSourceAtX, clipSourceAtY, sourceClipWidth, sourceClipHeight, 
    canvasX, canvasY, canvasDrawWidth, canvasDrawHeight 
)

例如，假設你正專注於座標[X = = 1000，Y = = 500]在圖像上。

要顯示圖像中的[1000,500]的640像素512像素X部分可以使用的drawImage這樣的：

context.drawImage(

    // use "sourceImage" 
    sourceImage 

    // clip a 640x512 portion of the source image at left-top = [1000,500] 
    sourceImage,1000,500,640,512, 

    // draw the 640x512 clipped subimage at 0,0 on the canvas 
    0,0,640,512    
);

的演示：http://jsfiddle.net/m1erickson/MtAEY/

enter image description here

來源

2014-06-14 04:14:57 markE

謝謝markE。我將draw（）方法更改爲 – KevinRethwisch

函數draw（）{var_screen = document。的getElementById（「畫布」）; var ctx = canvas.getContext（「2d」）; var map = new Image（）; var mapWidth = map.width; var mapHeight = map.height; map.src =「world.jpg」; map.onload = function（）{ var width = window.innerWidth; var height = window.innerHeight; ctx.drawImage（map，0，0，24000，12000，0，0，width，height）; }; } – KevinRethwisch

並沒有改變。對不起，我看不到任何換行符或代碼塊出現在註釋中。當我點擊輸入時，評論會被過早添加。 – KevinRethwisch

這裏的工作javascript代碼，格式很好。

function draw() { 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    var map = new Image(); 
    map.src = "world.jpg"; 
    map.onload = function() { 
    var width = window.innerWidth; 
    var height = window.innerHeight; 
    canvas.width=width; 
    canvas.height=height; 
    var mapWidth=map.width; 
    var mapHeight=map.height; 
    var scale=scalePreserveAspectRatio(mapWidth,mapHeight,width,height); 
    ctx.mozImageSmoothingEnabled = false; 
    ctx.imageSmoothingEnabled = false; 
    ctx.webkitImageSmoothingEnabled = false; 
    ctx.drawImage(map, 0, 0, mapWidth, mapHeight, 0, 0, mapWidth*scale, mapHeight*scale); 
    }; 
} 
function scalePreserveAspectRatio(imgW,imgH,maxW,maxH){ 
    return(Math.min((maxW/imgW),(maxH/imgH))); 
}

關鍵是兩行

canvas.width=width; 
canvas.height=height;

只需這些設定爲在CSS不起作用100％，100％顯然是窗口作爲我的內部尺寸的不是100％假定。由於這些維度是動態的，因此必須通過JS而不是CSS來設置。

來源

2014-06-16 20:27:33 KevinRethwisch

HTML5畫布中的非常高分辨率圖像

回答

相關問題