调整画布背景图像的大小 - Fabricjs答案

【问题标题】：Resize background image of canvas - Fabricjs调整画布背景图像的大小 - Fabricjs
【发布时间】：2016-08-25 09:54:33
【问题描述】：

我正在使用 fabricjs 来玩画布，并通过 javascript 将图像加载到其中。

我有一个函数可以调整画布的大小以使其具有响应性，因此我想调整加载的背景图像的大小以适应画布但保持纵横比。

我目前没有找到符合我标准的示例，希望有人能提供帮助。

Javascript

var canvas = new fabric.Canvas('drawing_layer');
 var img = new Image();
            img.onload = function () {
                canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), {
                    originX: 'left',
                    originY: 'top',
                    left: 0,
                    top: 0
                });

// initially sets width of canvas to fit the image
                canvas.setDimensions({
                    width: img.width,
                    height: img.height
                });
            };
// below is a call to function that resizes the canvas
resizeCanvas();

//sets listener to resize event
            window.addEventListener('resize', resizeCanvas);

【问题讨论】：

我可以为此使用 jsfiddle 吗？
Aeseir，我也面临同样的问题。你找到解决办法了吗？
是的，刚刚发布了答案

标签： javascript canvas fabricjs

【解决方案1】：

您的 resizeCanvas() 应如下所示：

resizeCanvas(width, height) {
  canvas.backgroundImage.scaleToWidth(width);
  canvas.backgroundImage.scaleToHeight(height);
  canvas.setDimensions({width: width, height: height});
  canvas.renderAll();
}

你应该没事的。

【讨论】：

【解决方案2】：

我在 Angular 2+ 中的解决方案。

@HostListener('window:resize', ['$event'])
      resizeCanvas(event?: any) {
        const width: number = (window.innerWidth > 0) ? window.innerWidth : screen.width;
        const height: number = (window.innerHeight > 0) ? window.innerHeight : screen.height;
        const widthn: number = width * 0.7;
        const heightn: number = height - 100;
        canvas.setDimensions({
          width: widthn,
          height: heightn,
        });
      }

【讨论】：

0.7和100代表什么？

【解决方案3】：

为了通过保留图像的纵横比来设置背景图像，并将其设置在画布的中心。

const setBackgroundFromDataUrl = (dataUrl, options = {}) => {
  if (!dataUrl) { return true; }

  let img = new Image();
  img.setAttribute('crossOrigin', 'anonymous');
  img.onload = () => {

   // maxWidth // Max width of the canvas
   // maxHeight //Max height of canvas

    let imgWidth = img.width; // Current image width
    let imgHeight = img.height; // Current image height

    let widthAspectRatio = maxWidth / imgWidth;
    let heightAspectRatio = maxHeight / imgHeight;

    let finalAspectRatio = Math.min(widthAspectRatio, heightAspectRatio)

    let finalHeight = imgHeight * finalAspectRatio;
    let finalWidth = imgWidth * finalAspectRatio;

    let imgTop = 0;
    if (maxHeight > finalHeight) {
      imgTop = (Math.round(maxHeight) - Math.round(finalHeight)) / 2;
    }

    let imgLeft = 0;
    if (maxWidth > finalWidth) {
      imgLeft = (Math.round(maxWidth) - Math.round(finalWidth)) / 2;
    }

    let nsgImage = new fabric.Image(img).scale(finalAspectRatio);
    nsgImage.set({ left: imgLeft, top: imgTop });

    canvas.setBackgroundImage(nsgImage, () => canvas.renderAll());

  }

  img.src = dataUrl;

};

【讨论】：