HTML5 - Canvas，drawImage（）绘制图像模糊

Question

我试图将以下图像绘制到画布上，但尽管定义了画布的大小，但它看起来很模糊。正如您在下面看到的，图像清晰而清晰，而在画布上，图像模糊且像素化。

这是它的外观（左边是原始的，右边是绘制的画布，模糊不清。）

我究竟做错了什么？

console.log('Hello world')

var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var playerImg = new Image()

// http://i.imgur.com/ruZv0dl.png sees a CLEAR, CRISP image
playerImg.src = 'http://i.imgur.com/ruZv0dl.png'
playerImg.width = 32
playerImg.height = 32

playerImg.onload = function() {
  ctx.drawImage(playerImg, 0, 0, 32, 32);
};

#canvas {
  background: #ABABAB;
  position: relative;
  height: 352px;
  width: 512px;
  z-index: 1;
}

<canvas id="canvas" height="352" width="521"></canvas>

Answer 1

发生这种情况的原因是抗锯齿。只需将imageSmoothingEnabled设置为false即可

context.imageSmoothingEnabled = false;

这是一个jsFiddle版本

的jsfiddle：https://jsfiddle.net/mt8sk9cb/

var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var playerImg = new Image()

// http://i.imgur.com/ruZv0dl.png sees a CLEAR, CRISP image
playerImg.src = 'http://i.imgur.com/ruZv0dl.png'

playerImg.onload = function() {
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(playerImg, 0, 0, 256, 256);
};

Answer 2

你的问题是你的cssxswpoivs你的css约束画布属性canvas{width:512}将使你的浏览器重新取样整个画布。

要避免它，请删除那些css声明。

width=521

var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var playerImg = new Image()

// http://i.imgur.com/ruZv0dl.png sees a CLEAR, CRISP image
playerImg.src = 'http://i.imgur.com/ruZv0dl.png'
playerImg.width = 32
playerImg.height = 32

playerImg.onload = function() {
  ctx.drawImage(playerImg, 0, 0, 32, 32);
};

#canvas {
  background: #ABABAB;
  position: relative;
  z-index: 1;
}

此外，如果您要重新采样图像（从32x32到其他尺寸），@ scan的解决方案将是最佳选择。

Answer 3

以下代码适用于我：

<canvas id="canvas" height="352" width="521"></canvas>

Answer 4

除了@canvas的答案。

img.onload = function () {
  canvas.width = img.width;
  canvas.height = img.height;
  context.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height);
};
img.src = e.target.result;  // your src

工作完美。但在我的情况下，更改画布大小将此属性重置为true。

context.imageSmoothingEnabled = false;

Answer 5

简单提示：在x和y位置绘制.5。喜欢drawImage（，0.5,0.5）：D你得到清晰的边缘：D