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画布中的非常高分辨率图像

回答

相关问题