Question

在这个问题的最后是一个SSCCE，用于在HTML5画布上显示24000x12000米勒卫星图像投影。它有几个问题：

不是在一个屏幕上显示整个图像，而是只显示左上角的一小部分。
图像因图像分辨率非常高而不应出现在显示比例的极端像素化

enter image description here

使用的图片位于Wikimedia。我将其重命名为＃34; world.jpg＆＃34;。
这不是一个普通的Web应用程序，在应用程序执行期间不会下载大图像，所以任何不需要下载如此大图像的建议都没有用。
应用程序将动态缩放到各种地图区域，从而获得较大的图像尺寸。
在实际代码中我使用外部样式表和javascript文件。我将它们整合到html中仅用于SSCCE。

这是代码。

<!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>

Answer 1

使用剪辑和缩放原始图像的context.drawImage版本：

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

例如，假设您关注的是图像上的坐标[x == 1000，y == 500]。

要以[1000,500]显示图像的640px x 512px部分，您可以像这样使用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

Answer 2

这是工作的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来设置。

HTML5 Canvas中的高分辨率图像

2 个答案: