Question

我有一个带有缩放功能的图像，如下图所示，为此，我将比例设置为25％并绘制一个矩形。

但是当我尝试回到100％时，矩形似乎模糊不清。

当我改变比例时，如何使矩形不模糊，并且与其旁边的第二个矩形具有相同的外观？

  var paintPolygon = function () {
    /* Drawing on Paint App */
    var size = parseInt($("#zoom").val());
    var defaultSize = 5;
    var computedSize = (size / 100) * defaultSize;
    tmp_ctx.lineWidth = computedSize;

} 在上面的代码中，我将根据比例调整图形的lineWidth。

当用户完成绘图时，我将画布保存为全局临时图像变量

var tmpImg = new Image();
    tmpImg.width = $("#imgFile").width();       
    tmpImg.height = $("#imgFile").height();     
    tmpImg.src = canvas.toDataURL();


tmp_canvas.addEventListener('mouseup', function () {
    tmp_canvas.removeEventListener('mousemove', onPaint, false);

    if (currentTool == "eraser") {
        ppts = [];
        $("#tmp_canvas").css('cursor', 'default');
    }
    else {
        ctx.globalCompositeOperation = 'source-over';
        // Writing down to real canvas now
        ctx.drawImage(tmp_canvas, 0, 0);
        tmpImg.width = $("#imgFile").width();       
        tmpImg.height = $("#imgFile").height();     
        tmpImg.src = canvas.toDataURL();
        // Clearing tmp canvas
        tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
        // Emptying up Pencil Points
        ppts = [];
    }
}, false);

然后进行缩放事件。

function onPanChange() {
    var size = $("#zoom").val();
    $("#imgFile").css({ "height": size + "%", "width": size + "%" });
    var imgH = $("#imgFile").height(), imgW = $("#imgFile").width();
    var canvas = document.querySelector('#clientAnnotation');
    var ctx = canvas.getContext('2d');
    canvas.width = imgW;
    canvas.height = imgH;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(tmpImg, 0, 0, canvas.width, canvas.height);
}

因此，每次我们改变比例时，我们总是绘制图像。我知道，每当我们缩小比例时，绘图就会变得更加模糊。只是请求帮助我们如何从左侧制作矩形看起来与右侧的矩形相同，即使我们缩放更大或更小。

如果我添加此代码

ctx.imageSmoothingEnabled = false;

图纸看起来像这样

对不起我的英语不好，如果有什么不清楚需要进一步解释，请告诉我。任何帮助都将受到超级赞赏。

谢谢。

Answer 1

简单地关闭画布＆＃39;图像的抗锯齿 - 不幸的是这个属性仍然是供应商前缀，所以这里是变化：

context.webkitImageSmoothingEnabled = false;
context.mozImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false; /// future

然后绘制图像。

对于尚未实现此功能的旧版本和浏览器，您可以选择使用CSS：

canvas {
    image-rendering: optimizeSpeed;             // Older versions of FF
    image-rendering: -moz-crisp-edges;          // FF 6.0+
    image-rendering: -webkit-optimize-contrast; // Webkit (non standard naming)
    image-rendering: -o-crisp-edges;            // OS X & Windows Opera (12.02+)
    image-rendering: crisp-edges;               // Possible future browsers.
    -ms-interpolation-mode: nearest-neighbor;   // IE (non standard naming)
}

＆＃13;

var img = document.createElement('img');
img.onload = drawExamples;
img.src = 'https://i.imgur.com/ramzOwQ.png';

function drawExamples() {

    var ctxS = smoothing.getContext('2d'),
        ctxNS = nosmoothing.getContext('2d');
    
    ctxNS.webkitImageSmoothingEnabled = false;
    ctxNS.mozImageSmoothingEnabled = false;
    ctxNS.imageSmoothingEnabled = false; //future

    ctxS.drawImage(img, 10,10);
    ctxNS.drawImage(img, 10,10);

    ctxS.drawImage(img, 80,10, img.width*3, img.height*3);
    ctxNS.drawImage(img, 80,10, img.width*3, img.height*3);
}

＆＃13;

.noSmoothing {
    image-rendering: optimizeSpeed;             // Older versions of FF
    image-rendering: -moz-crisp-edges;          // FF 6.0+
    image-rendering: -webkit-optimize-contrast; // Webkit
    image-rendering: -o-crisp-edges;            // OS X & Windows Opera (12.02+)
    image-rendering: optimize-contrast;         // Possible future browsers.
    -ms-interpolation-mode: nearest-neighbor;   // IE
}
h1 {font:24px sans-serif}

＆＃13;

<h1>Canvas with no modifications</h1>
<canvas id="smoothing" width="300" height="150"></canvas>

<h1>Canvas with smoothing off</h1>
<canvas id="nosmoothing" width="300" height="150" class="noSmoothing"></canvas>

＆＃13;

图像调整大小时，画布绘制变得模糊

1 个答案: