如何防止javascript drawImage（）缩放图像？

Question

我的目标很简单：在背景图片（特别是地图）上绘制图标。

我先创建一个画布，然后使用JavaScript在其上方绘制图标。 不幸的是，当我加载图标时，它会大大增加比例。 这是我的代码：

function draw(){
  var canvas = document.getElementById("WorldView");
  if(!canvas.getContext){return;}
  var ctx = canvas.getContext("2d");
  var img = new Image();
  img.onload = function(){ctx.drawImage(img,10,10);};
  img.src = 'images/ship-icon small.png';
}

HTML：

<body width=100% style="text-align: center;" onload="draw()">
  <canvas id="WorldView" ></canvas>
</body>

为什么会自动增加规模，如何防止这种情况发生？ 另外，在“ ctx.drawImage（img，10,10）;”上 '10，10'将其推向10px以上，更像50px。

Answer 1

您尚未为canvas元素设置任何尺寸，因此使用默认尺寸300 x 150进行设置，如果您使用CSS设置画布的尺寸，则会得到其内容的缩放比例。

尝试做：

var canvas = document.getElementById("WorldView");
canvas.width = window.innerWidth;   /// integer values
canvas.height = window.innerHeight;

（如果不打算填充窗口，则为其他值）。

然后从CSS中删除尺寸设置。

Answer 2

对于那些需要响应式画布元素的人。 （具有摄像头屏幕截图功能）。 我的解决方案是先将内容打印在临时画布中，如下所示：

originImageCanvas = document.createElement('canvas')
originImageCanvas.width = $(_video).outerWidth()
originImageCanvas.height = $(_video).outerHeight()
originImageCtx = originImageCanvas.getContext('2d')
originImageCtx.drawImage _video, 0, 0, originImageCanvas.width, originImageCanvas.height

hiddenCanvas = document.createElement('canvas')
hiddenCanvas.width = $(_video).outerWidth()
hiddenCanvas.height = $(_video).outerHeight()
ctx = hiddenCanvas.getContext('2d')

unless sourceX?
  sourceX = (hiddenCanvas.width / 2) - (sourceWidth / 2)

unless sourceY?
  sourceY = (hiddenCanvas.height / 2) - (sourceHeight / 2)

ctx.drawImage originImageCanvas, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, sourceWidth, sourceHeight

希望它可以帮助任何人！

如何防止javascript drawImage（）缩放图像？

问题描述

2 个解决方案

解决方案1
0 已采纳

解决方案2
0 2017-05-16 08:49:38

如何防止javascript drawImage（）缩放图像？

问题描述

2 个解决方案

解决方案1 0 已采纳

解决方案2 0 2017-05-16 08:49:38

解决方案1
0 已采纳

解决方案2
0 2017-05-16 08:49:38