在 canvas 中设置背景图片（fabric js）

Question

目标是在图像之上设置一个 canvas。（像teespring一样制作产品模型生成器，但更简单）

Codepen: https://codepen.io/anon/pen/YmEGyW

我几乎已经达到了我想要的程度，但我有一些问题：

如果我在 canvas 上设置背景图片，我将无法保存（不知道为什么，但是当我这样做时我无法点击 "save"，没有任何反应）。像这样：

const canvas = new fabric.Canvas('fCanvas', {
  backgroundImage: "https://drive.google.com/uc?export=view&id=0B3ubyt3iIvkaUlpHVEpDTGhjQzg",
...
});

为了解决这个问题，我在 canvas... ，就像在 codepen 示例中一样）

我想要的是预加载背景图片而不需要上传背景图片。

我如何 在加载时加载 google 驱动器图像（下方）而不需要通过 input/form 上传？

在实践中，这将是动态的，但现在我想使用 "https://drive.google.com/uc?export=view&id=0B3ubyt3iIvkaUlpHVEpDTGhjQzg" 作为背景图像。然后可以在上面上传可缩放的图像。

Answer 1

我建议您使用 css 来设置背景图片。

解决方案#1

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-beta.7/fabric.min.js"></script>

<div>
  <canvas id="fCanvas" width="400" height="400"></canvas>
</div>
<a id="downloadLnk" download="YourFileName.jpg">Download as image</a>

JS

const canvas = new fabric.Canvas('fCanvas');
fabric.Image.fromURL('https://picsum.photos/id/1083/200/300', 
    function(img) {
        canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
          scaleX: canvas.width / img.width,
          scaleY: canvas.height / img.height
        });
    }, { crossOrigin: 'Anonymous' });

function download() {
   var dt = canvas.toDataURL('image/jpeg');
   this.href = dt;
};
downloadLnk.addEventListener('click', download, false);

Codepen

https://codepen.io/murli2308/pen/XvzzWz

解决方案#2

CSS

canvas {
    background: url(https://picsum.photos/id/1083/200/300);
}

您可以用 class 或 id 替换 CSS 选择器。另外，您可以根据需要添加背景大小和背景位置。

Answer 2

查看文档 here 没有显示对我有用的选项。

var canvas = new fabric.Canvas('canvas-id');

canvas.setBackgroundImage('https://......', canvas.renderAll.bind(canvas), {
    backgroundImageOpacity: 1,
    backgroundImageStretch: false
});

在 canvas 中设置背景图片（fabric js）

Setting background image in canvas (fabric js)

javascript

canvas

fabricjs