fabric-texture/docs/sections/more-configuration/codes/limit-texture-output-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.setOutputLimitSize({
      width: /*-output-width-*/1000/**/,
      height: /*-output-height-*/1000/**/,
    })
  },
);