fabric.Image.fromURL('图片', (img, isError) => {
                    img.set({
                        scaleX: this.canvas.width / img.width,
                        scaleY: this.canvas.height / img.height,
                        // width: this.canvas.width,
                        // height: this.canvas.height,
                        // Needed to position backgroundImage at 0/0
                        // originX: 'left',
                        // originY: 'top'
                        left: 0,
                        top: 0
                    this.canvas.setBackgroundImage(img, this.canvas.renderAll.bind(this.canvas));
切记：  scaleX和 scaleY不要重复配置，否则不生效，坑
                    fabric.Image.fromURL('图片', (img, isError) => {                    img.set({                        scaleX: this.canvas.width / img.width,                        scaleY: this.canvas.height / img.height,                        // width: this.canvas...
				
什么是Fabric.js?
Fabric.js是一个可以简化Canvas程序编写的库。 Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具。
为什么要使用Fabric.js？
Canvas提供一个好的画布能力, 但是Api不够友好。绘制简单图形其实还可以, 不过做一些复杂的图形绘制, 编写一些复杂的效果，就不是那么方便了。Fabri...
我使用 Fabric.js 的版本是 4.6.0。
这次要实现的效果是：在本地上传一张图片，然后渲染到 canvas 里(当做背景图)。
我会用 原生 的方法实现一次，然后再在 Vue3 + Element-plus 环境下实现一次。
最后聊聊我在真实项目中的做法。
    <canvas ref="signHandle" class="canvas" />
    <div class="btn_container" :style="{ height: height + 'px' }">
      <van-button style="margin-left: auto;" round @touchstart=
测试环境、预发布环境都没有问题，发布到线上突然遇到问题，图像显示不全，或有的就出来了。崩溃了很久。最终发现是图像太大了，无法展示。
RangeError: Invalid typed array length: 48771072
WebglFilterBackend.copyGLTo2DPutImageData [as copyGLTo2D]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wac9Ovw3-1640662646307)(/img/bVc
				
应用场景:在做一个图形和文本及背景的设计器,然后用户通过导入Excel数据结合设计的模板来生成最终想要的图纸,打印出来以便给工人看,在公司大佬的建议下使用了FabricJS,但是在导入背景(底图)的过程中,自动生成的位置,客户总是不满意,所以干脆让他自己拖~~
获取用户上传的图片资源,用于保存显示
 	var objURL = null;
    //获取安全模式下的图片真实路径(仅base64)
    $(document).on('change', '#inputGroupFile02', fun.
				
fabric.js 中的 setObjectsCoords 方法用于将多个对象的坐标设置为给定的坐标。这个方法接受两个参数：第一个是一个对象数组，表示要设置坐标的对象；第二个是布尔值，表示是否触发顶点事件。
var rect1 = new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50
var rect2 = new fabric.Rect({
  left: 150,
  top: 150,
  width: 50,
  height: 50
var objects = [rect1, rect2];
canvas.setObjectsCoords(objects, true);
在这个例子中，我们创建了两个矩形，然后将它们的坐标设置为 (100, 100) 和 (150, 150)。最后一个参数为 true 会触发顶点事件.