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

Question

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

javascriptcanvasfabricjs

3

目标是在图片上方设置一个画布。(制作像Teespring那样的产品模型生成器，但更简单)

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

我已经接近想要的效果了，但还有一些问题:

如果我在画布上设置背景图片，我无法保存(不知道为什么，但当我这样做时，我无法点击“保存”，什么也没有发生)。就像这样:

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

为了解决这个问题，我在画布上创建了一个画布...但这只有在我上传图片时才有效（或者像在codepen示例中一样，我找出了如何使其工作）。

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

如何在加载时加载谷歌驱动器中的图像（如下所示），而无需通过输入/表单上传？

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

- uno

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Conor · Answer 1

看这里的文档, 对我而言使其工作的选项没有显示出来。

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

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

- murli2308 · Answer 2

我建议您使用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);
}

您可以使用类或ID替换CSS选择器。此外，根据您的要求，您可以添加background-size和background-position。