Javascript - 设置context2d图像作为画布的背景

Question

我正在使用以下代码将优质图像设置为画布的背景。如果我将图像直接设置为背景，它就可以了。但图像质量不好。所以我使用另一个画布来获得高质量的图像然后我需要设置为背景。我正在使用fabricjs

var _img = new Image();
_img.src = img_base64;
var ctx = canvas.getContext("2d");

_img.onload = function(){
    // set size proportional to image
    canvas.height = canvas.width * (_img.height / _img.width);

    // resize to 50%
    var oc = document.createElement('canvas'),
    octx = oc.getContext('2d');
    oc.width = _img.width * 0.5;
    oc.height = _img.height * 0.5;
    octx.drawImage(_img, 0, 0, oc.width, oc.height);

    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

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

    // Should be an instance of fabric.image
    var imgInstance = new fabric.Image(ctx, {
        width: canvas.width,
        height: canvas.height
    });
    console.log(imgInstance);

    canvas.setBackgroundImage(imgInstance, canvas.renderAll.bind(canvas), {
        width: canvas.width ,
        height: canvas.height,
        /*originX: 'left',
        originY: 'top'*/
        // Needed to position backgroundImage at 0/0
    });
};

错误是

CanvasRenderingContext2D.drawImage的参数1无法转换为以下任何一项：HTMLImageElement，SVGImageElement，HTMLCanvasElement，HTMLVideoElement，ImageBitmap

我实际上在使用base64。但对于小提琴，我正在使用直接路径

这是Fiddle

编辑：我在本地看到图像渲染，但我需要将其设置为背景。

Answer 1

图像质量可能不好的唯一原因是因为存在高的缩减/升级因子。

缩小对图像和css元素很好，而在画布上绘制drawImage时很糟糕，因为画布使用最近邻居调整大小。

除此之外，保留了图像的质量。

Fabricjs尝试帮助这个产品调整大小过滤器。

您可以在加载图像时对图像应用调整大小滤镜，然后使用所需尺寸的图像并匹配画布像素的1：1。请注意，如果以较高分辨率导出，则无法恢复图像的原始质量。