fix: 超过纹理上限的图加滤镜后缺右边和下边
fabric 的 WebGL 滤镜后端建的是一张 config.textureSize 见方(v7 默认 4096)的 GL 画布,copyGLTo2D 却按**图片自然尺寸**去拷源矩形。图片比 4096 大时源矩形超出 GL 画布边界,超出的部分画不出来。 实测:6000x3150 的图加亮度滤镜后只剩左边 683/1078 = 0.683 的宽度, 正好是 4096/6000 = 0.6827。 调大 textureSize 不是办法——GL 画布是正方形且一次性分配,8192 就是 268 MB, 本机 GPU 上限 16384 是 1 GB,而且更大的图照样溢出。改成导入时把长边压到 运行时的 config.textureSize:这个工具导出 1200x630 量级的封面,4096 的长边 远超需要,成品里看不出差别,还顺带省内存和导出耗时。
This commit is contained in:
@@ -13,6 +13,7 @@ import {
|
||||
import { ref, shallowRef } from "vue";
|
||||
import type { CanvasSize, LayerKind, SelectionKind, ShapeKind, ToolId } from "@/types";
|
||||
import { DEFAULT_SIZE } from "./canvasSize";
|
||||
import { capImageSize } from "./imageLimits";
|
||||
|
||||
/**
|
||||
* 编辑器核心:一个模块级单例。
|
||||
@@ -250,11 +251,16 @@ export function applyLocked(obj: FabricObject, locked: boolean) {
|
||||
/**
|
||||
* 装一张图进画布并铺满(object-fit: cover 的等效)。
|
||||
* 背景性质的图沉到最底层,否则会盖住先加进来的文字。
|
||||
*
|
||||
* 进来先过一道 `capImageSize`:超过 fabric 纹理上限的图加了滤镜会缺右边和下边,
|
||||
* 原因和取舍见 `imageLimits.ts`。
|
||||
*/
|
||||
async function addImage(src: string, opts: { toBack?: boolean } = {}): Promise<FabricImage> {
|
||||
const c = canvas.value;
|
||||
if (!c) throw new Error("画布还没挂载");
|
||||
const img = await FabricImage.fromURL(src, { crossOrigin: "anonymous" });
|
||||
const capped = capImageSize(img.getElement() as HTMLImageElement);
|
||||
if (capped !== img.getElement()) img.setElement(capped);
|
||||
const scale = Math.max(size.value.width / img.width, size.value.height / img.height);
|
||||
img.set({
|
||||
scaleX: scale,
|
||||
|
||||
Reference in New Issue
Block a user