drawImage() 渲染模糊图像答案

【问题标题】：drawImage() rendering blurry imagesdrawImage() 渲染模糊图像
【发布时间】：2017-04-07 00:53:46
【问题描述】：

我已经阅读了 5 多个关于此的其他问题，它们都与我的不同，因为我正在绘制不止一张图像，并且因为我在我的 html 而不是我的 css 中设置了画布的宽度和高度。

<canvas id="myCanvas" width="480" height="320"></canvas>

这就是我绘制图像的方式（我正在制作国际象棋游戏）

function piece(color, piece, square, pieceId){
    this.dragging=false;
    this.color=color;
    this.piece=piece;
    this.square=square;
    this.moveCount=0;
    this.pieceId = pieceId;
    this.captured = false;
    this.firstMove;
    this.xCoord=square.x+(spaceWidth/2-8);
    this.yCoord=square.y+(spaceHeight/2-8);
    this.drawPiece = function(){
        if (this.color == 'w') {
            // need to get rid of these magic numbers don't really know what i am doing
            if (this.piece == 'p') {
                loadImage("img/whitepawn.png", this.xCoord-4, this.yCoord-3);
            } else if (this.piece == 'b') {
                loadImage("img/whitebishop.png", this.xCoord-4, this.yCoord-3);             } else if (this.piece == 'kn') {
                loadImage("img/whiteknight.png", this.xCoord-4, this.yCoord-3);             } else if (this.piece == 'r') {
                loadImage("img/whiterook.png", this.xCoord-4, this.yCoord-3);
            } else if (this.piece == 'k') {
                loadImage("img/whiteking.png", this.xCoord-4, this.yCoord-3);
            } else if (this.piece == 'q') {
                loadImage("img/whitequeen.png", this.xCoord-4, this.yCoord-3);              }
        } else if (this.color == 'b') { // black piece
            // need to get rid of these magic numbers don't really know what i am doing
            if (this.piece == 'p') {
                loadImage("img/blackpawn.png", this.xCoord-4, this.yCoord-3);
            } else if (this.piece == 'b') {
                loadImage("img/blackbishop.png", this.xCoord-4, this.yCoord-3);             } else if (this.piece == 'kn') {
                loadImage("img/blackknight.png", this.xCoord-4, this.yCoord-3);             } else if (this.piece == 'r') {
                loadImage("img/blackrook.png", this.xCoord-4, this.yCoord-3);
            } else if (this.piece == 'k') {
                loadImage("img/blackking.png", this.xCoord-4, this.yCoord-3);
            } else if (this.piece == 'q') {
                loadImage("img/blackqueen.png", this.xCoord-4, this.yCoord-3);              }
        } else {
            ;
        }
    }
}

function loadImage( src, x, y) {
    var imageObj = new Image();
    imageObj.src = src;
    imageObj.onload = function() {
        ctx.imageSmoothingEnabled = false;
        ctx.drawImage(imageObj, x, y, 25, 25);
    };
}

有谁知道我做错了什么？我整天都在努力解决这个问题，并且可以使用一些帮助。

【问题讨论】：

您能否提供一个minimal reproducible example，例如仅其中一张图片？（您可以将其上传到 stackoverflow 的 imgur 帐户）。您在哪个浏览器上遇到此问题（有些浏览器仍然有 imageSmoothingEnabled 的前缀版本。
有没有办法获取要显示的图像文件 img/*.png，以便我可以在笔记本电脑上进行测试？
是的，让我试着弄清楚如何做 imgur 的事情，而且我正在使用 chrome。刚刚在 Safari 中尝试过，但看起来仍然很糟糕
我想到的第一件事是，位置是整数吗？如果位置和/或大小不是整数，我相信画布会尝试渲染子像素。
看来我一次只能将它们上传到帖子中。所有图片都在这里github.com/Kyle628/Wizard_Chess/tree/pawns-luke-branch/img

标签： javascript html canvas drawimage

【解决方案1】：

您的问题可能来自浏览器在您绘制图像时所做的插值。

不幸的是，没有标准的方法可以撤消此操作。

这是一个带有一些可能有用线索的问题： Disable Interpolation when Scaling a <canvas>

更简单、更丑陋的解决方法可能是使用更高分辨率的图像（在您最喜欢的图像处理工具中放大它们并选择最接近的插值设置）。

【讨论】：