在畫布中設置背景圖像（fabric js）

Question

目標是在圖像之上設置畫布。 （制作像 teespring 一樣的產品模型生成器，但更簡單）

代碼筆： 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"作為背景圖像。 然后能夠在頂部上傳可縮放的圖像。

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);

代碼筆

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

解決方案#2

CSS

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

您可以用 class 或 id 替換 CSS 選擇器。 此外，您可以根據需要添加背景大小和背景位置。

Answer 2

查看此處的文檔，未顯示使其對我有用的選項。

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

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