Javascript - 将 context2d 图像设置为画布的背景答案

【问题标题】：Javascript - set context2d Image as background for canvasJavascript - 将 context2d 图像设置为画布的背景
【发布时间】：2018-05-30 09:54:00
【问题描述】：

我正在使用以下代码将优质图像设置为画布的背景。如果我直接将图像设置为背景，它就可以工作。但是画质不是很好。所以我使用另一个画布来获得高质量的图像，然后我需要设置为背景。我正在使用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

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

【问题讨论】：

你想设置为画布背景对吧？
是的，完全正确。来自ctx
如果您直接将该图像加载为背景，我认为没有质量问题。检查这个fiddle
不，这是原始图像。 tigeensolutions.com/test/sample.jpg
typo: new fabric.Image(ctx, Image 构造函数接受 HTMLImageElement 或 HTMLCanvasElement（可能还有 drawImage 接受的所有其他元素）或表示此类 id 的字符串文档中的元素。 ctx 是 CanvasRenderingContext2D，此方法不支持。我猜你的意思是new fabric.Image(oc,...

标签： javascript jquery html canvas fabricjs

【解决方案1】：

图像质量可能不好的唯一原因是存在较高的缩小/放大系数。

图像和 css 元素的缩小效果很好，而在画布上的 drawImage 上进行缩小效果不好，因为画布使用最近邻调整大小。

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

Fabricjs 尝试在此提供调整过滤器大小方面提供帮助。

您可以在加载图像时对其应用调整大小过滤器，以便您使用所需尺寸且与画布像素 1:1 匹配的图像。请注意，如果您以更高分辨率导出，您将无法恢复图像的原始质量。

【讨论】：