HTML canvas 最小图像调整大小导致图像失真

Question

我有一个 html canvas 调整大小的图像。图片的大小从 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';

Answer 1

事实证明 canvas 中的绘图对象是正确的选择。它可以比动态 "resized" 所以没有质量损失。对象首先绘制到隐藏的 canvas，然后绘制到可见的。

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);

HTML canvas 最小图像调整大小导致图像失真

HTML canvas minimum image resize results in distorted image

svg

canvas

image-resizing