在画布中设置背景图像（织物js）

Posted 2023-03-25

【中文标题】在画布中设置背景图像（织物js）

【英文标题】：Setting background image in canvas (fabric js)

【发布时间】：2019-12-12 13:19:32

【问题描述】：

目标是在图像上设置画布。 （制作像 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" 作为背景图像。然后就可以在上面上传可缩放的图片了。

【参考方案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"  ></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);

代码笔

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

解决方案 #2

CSS

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

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

【讨论】：

但是我无法保存它。我需要将模型保存到数据库中。我有这个：codepen.io/anon/pen/JgOKYa 作为以前的尝试，但我不知道如何将背景图像与画布一起保存

用 JS 添加的更新答案

我试过了，但没有任何改变。你能在codepen中显示它吗？

现在问题出现在使用 canvas.setBackgroundImage.. 由于我似乎找不到的原因，我现在无法保存画布

通过设置交叉原点。也更新了答案和代码笔

【参考方案2】：

查看文档here 未显示使其对我有用的选项。

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

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