HTML 画布最小图像大小调整导致图像失真答案

【问题标题】：HTML canvas minimum image resize results in distorted imageHTML 画布最小图像大小调整导致图像失真
【发布时间】：2015-12-28 11:37:56
【问题描述】：

我有一个带有调整大小图像的 html 画布。图片的大小从 10% 调整到 40%，如果您将图片大小调整超过 50%，这应该不会有问题。

然而图像最终被扭曲了。

为了便于说明，上图放大了几倍。

第一张图片是调整大小的结果，第二张是图片的样子。我的第一个想法是创建 SVG 图像，但在不调整大小时它们甚至显示不正确。我猜 canvas 不能很好地支持 SVG。

我创建了jsfidle示例link（注意左上角）

有什么方法可以正确调整图像的大小，或者我应该在 Photoshop 中为每一个调整大小吗？

    var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');

// širina canvasa
 ctx.canvas.width  = window.innerWidth-23;
 ctx.canvas.height = 80;


ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fillStyle="#b0b0b0";
ctx.fill();

  // resized image - wwrong
  var imgorg = new Image();
    imgorg.onload = function() {
    ctx.drawImage(imgorg,0, 10,30,30);
    }
     imgorg.src = 'http://vetercek.com/master3/img/vanish/50/v0.png';

// how the image should look like
  var imgorg2 = new Image();
    imgorg2.onload = function() {
    ctx.drawImage(imgorg2,0, 30);
    }
     imgorg2.src = 'http://vetercek.com/master3/img/vanish/30/v0.png';

 // SVG sample without resize   - also wrong
  var imgorg3 = new Image();
    imgorg3.onload = function() {
    ctx.drawImage(imgorg3,0, 60);
    }
     imgorg3.src = 'http://vetercek.com/master3/img/vanish/30/v0.svg';

【问题讨论】：

Canvas 使用 GPU 来渲染图像。当您放大（或缩小）时，它将创建工件。这是不可避免的，像素是离散的单位，如果不对它的外观做出一些近似，就无法让一个像素适合一个半像素。
即使不通过画布，您的图像对我来说看起来也不一样（其中的黑线数量不一样），并且您的 svg 版本只是两条平行线。跨度>
感谢两位的回答。 @Kaiido 图片应该是一样的。我从 svg 创建了 png。但你是对的，中间只有两条黑线和一条白线。如果我在那里创建另一个画布绘制图像保存它并稍后恢复呢？它可以正常工作吗？我在 jsfidle jsfiddle.net/2bv0vyab/2 中绘制了对象

标签： canvas svg image-resizing

【解决方案1】：

事实证明，在画布中绘制对象是正确的选择。它可以比动态“调整大小”，因此没有质量损失。对象首先被绘制到隐藏的画布上，然后在可见的画布上。

https://jsfiddle.net/5xy2mLrp/11/

//magnification
var pov=0.2;

// znak1
var canvasPattern = document.createElement("canvas");
canvasPattern.width = 200*pov;canvasPattern.height = 200*pov;
var contextPattern = canvasPattern.getContext("2d");

// sign1
contextPattern.beginPath();
contextPattern.moveTo(95*pov,61.5*pov); contextPattern.lineTo(95*pov,138.5*pov);contextPattern.closePath();
contextPattern.lineWidth=2*pov;contextPattern.strokeStyle = 'black';contextPattern.stroke();
contextPattern.beginPath();
contextPattern.moveTo(98*pov,61.5*pov); contextPattern.lineTo(98*pov,138.5*pov);contextPattern.closePath();
contextPattern.lineWidth=4*pov;contextPattern.strokeStyle = 'white';contextPattern.stroke(); contextPattern.beginPath();
contextPattern.moveTo(100*pov,61.5*pov);contextPattern.lineTo(100*pov,138.5*pov);contextPattern.closePath();
contextPattern.lineWidth=2*pov;contextPattern.strokeStyle = 'black';contextPattern.stroke();


var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');

// širina canvasa
 ctx.canvas.width  = window.innerWidth-23;
 ctx.canvas.height = 80;


ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fillStyle="#808080";
ctx.fill();


ctx.drawImage(canvasPattern,30, 30);

【讨论】：