javascript - 织物 Canvas - 图像分辨率很差

Question

我正在我的应用程序中实现 Fabricjs 作为编辑工具。我需要在 Canvas 中设置高分辨率图像。如果我使用 setBackgroundImage 方法，它仅适用于小尺寸(尺寸小于 Canvas )图像。所以我需要减小图像的大小(但需要保持比例)以获得好看的东西。

我的第一个想法是下采样，这对某些图片效果很好，但不适用于所有图片。这是代码:

方法1)

var steps = 2;
var imgAspect = img.width / img.height;
var oc = document.createElement('canvas');
octx = oc.getContext('2d');

for(var i = 0; i < steps; i++){
    if(i == 0){
        oc.width = img.width * 0.5;
        oc.height = img.height * 0.5;
        octx.drawImage(img, 0, 0, oc.width, oc.height);
    }
    else{
        octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);
    }
}

_w = canvas.width;
_h = canvas.height;

ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5, 0, 0, _w, _h);

var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
var c = document.createElement('canvas');
c.setAttribute('id', '_temp_canvas');
c.width = canvas.width;
c.height = canvas.height;
c.getContext('2d').putImageData(data, 0, 0);

var img = fabric.Image.fromURL(c.toDataURL(), function(img) {
    img.left = 00;
    img.top = 00;
    img.isFixed = true;
    img.selectable = false;
    canvas.add(img);
    c = null;
    $('#_temp_canvas').remove();

    canvas.renderAll();
});

我的第二个想法，我遵循 here看起来很简单

var canvasCopy = document.createElement("canvas")
var copyContext = canvasCopy.getContext("2d")
var ratio = 1;

if(img.width > canvas.width){
    ratio = canvas.width / img.width;
}
else if(img.height > canvas.height){
    ratio = canvas.height / img.height;
}

canvasCopy.width = img.width;
canvasCopy.height = img.height;
copyContext.drawImage(img, 0, 0);

canvas.width = img.width * ratio;
canvas.height = img.height * ratio;

ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);

问题在于它们都没有产生良好的分辨率。方法1对于某些图片效果很好，但对于少数图片则失败。如果我尝试方法 2，它可以处理方法 1 中失败的图片。有人可以帮助解决分辨率方面缺少的内容吗？

请参阅fiddle1和 fiddle2有 2 个不同的图像。您可以通过调用_img.onload函数中的method1和method2来查看差异。

Answer 1

我不知道这是否是您的情况，但对我来说，imageSmoothingEnabled=false 就像

var canvasCopy = document.createElement("canvas")
var copyContext = canvasCopy.getContext("2d")
copyContext.imageSmoothingEnabled = false;

引用http://fabricjs.com/lanczos-webgl