fabric-texture/docs/sections/more-configuration/codes/limit-texture-input-size-demo.ts

This JavaScript library enables fast and efficient image distortion transformations using Canvas 2D.

import { FabricTexture, Texture } from 'fabric-texture';
import Perspective from 'fabric-texture/modes/perspective'
import { fabric } from 'fabric';

// 创建fabric画布对象
const canvas = document.createElement('canvas');
const fabricCanvas = new fabric.Canvas(canvas);

// 创建FabricTexture对象并进入交互态
const fabricTexture = new FabricTexture(fabricCanvas);
fabricTexture.enterEditing(new fabric.Object(), null, new Perspective(),
  // 在首次渲染前的回调中调整渲染配置
  (texture: Texture) => {
    // 设置输入画布的尺寸限制，过大的原图对象会缩放至该尺寸范围内
    // 适当地限制可以实现保证质量的同时减少交互延时（图像合成造成的页面阻塞）
    // 请避免设置过小限制，将非常容易导致变形图的结果模糊
    texture.setInputLimitSize({
      width: /*-input-width-*/2000/**/,
      height: /*-input-height-*/2000/**/,
    })
  },
);