UNPKG

vue3-image-filter

Version:

对于图片处理的插件,支持vue3 和 vue2,支持图片的滤镜处理

539 lines (512 loc) 30 kB
import * as PIXI from 'pixi.js'; import { TiltShiftFilter } from 'pixi-filters'; /****************************************************************************** Copyright (c) Microsoft Corporation. Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ***************************************************************************** */ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */ var __assign = function() { __assign = Object.assign || function __assign(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; function __awaiter(thisArg, _arguments, P, generator) { function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } return new (P || (P = Promise))(function (resolve, reject) { function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } step((generator = generator.apply(thisArg, _arguments || [])).next()); }); } function __generator(thisArg, body) { var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; function verb(n) { return function (v) { return step([n, v]); }; } function step(op) { if (f) throw new TypeError("Generator is already executing."); while (g && (g = 0, op[0] && (_ = 0)), _) try { if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; if (y = 0, t) op = [op[0] & 2, t.value]; switch (op[0]) { case 0: case 1: t = op; break; case 4: _.label++; return { value: op[1], done: false }; case 5: _.label++; y = op[1]; op = [0]; continue; case 7: op = _.ops.pop(); _.trys.pop(); continue; default: if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } if (t[2]) _.ops.pop(); _.trys.pop(); continue; } op = body.call(thisArg, _); } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; } } function __read(o, n) { var m = typeof Symbol === "function" && o[Symbol.iterator]; if (!m) return o; var i = m.call(o), r, ar = [], e; try { while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value); } catch (error) { e = { error: error }; } finally { try { if (r && !r.done && (m = i["return"])) m.call(i); } finally { if (e) throw e.error; } } return ar; } function __spreadArray(to, from, pack) { if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { if (ar || !(i in from)) { if (!ar) ar = Array.prototype.slice.call(from, 0, i); ar[i] = from[i]; } } return to.concat(ar || Array.prototype.slice.call(from)); } typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) { var e = new Error(message); return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e; }; var naturalShader = "// 自然效果 \nprecision mediump float;\nvarying vec2 vTextureCoord;\nuniform sampler2D uSampler;\nuniform float brightness;\nuniform float saturation;\nuniform float contrast;\nuniform float temperature;\nuniform float gamma;\n\nvoid main(void) {\n vec4 color = texture2D(uSampler, vTextureCoord);\n vec3 rgb = color.rgb;\n \n // 亮度调整\n rgb *= brightness;\n \n // 饱和度调整\n float gray = dot(rgb, vec3(0.299, 0.587, 0.114));\n rgb = mix(vec3(gray), rgb, saturation);\n \n // 对比度调整\n rgb = (rgb - 0.5) * contrast + 0.5;\n \n // 调整色温\n rgb = mix(rgb, rgb * vec3(1.1, 1.0, 0.9), temperature);\n \n // Gamma校正\n rgb = pow(rgb, vec3(1.0 / gamma));\n \n // 确保颜色值在有效范围内\n rgb = clamp(rgb, 0.0, 1.0);\n \n gl_FragColor = vec4(rgb, color.a);\n}"; var defoggingShader = "// src/shaders/defogging.frag\nprecision mediump float;\n\nvarying vec2 vTextureCoord;\nuniform sampler2D uSampler;\nuniform float fogAmount;\n\nvoid main(void) {\n vec4 color = texture2D(uSampler, vTextureCoord);\n \n // 计算暗通道\n float darkChannel = min(min(color.r, color.g), color.b);\n \n // 估算大气光照\n vec3 atmosphere = vec3(1.0);\n \n // 计算透射率\n float transmission = 1.0 - fogAmount * darkChannel;\n \n // 应用去雾公式\n vec3 result = (color.rgb - atmosphere * (1.0 - transmission)) / max(transmission, 0.1);\n \n gl_FragColor = vec4(result, color.a);\n}"; var sharpenShader = "// src/shaders/sharpen.frag 锐化\nprecision mediump float;\n\nvarying vec2 vTextureCoord;\nuniform sampler2D uSampler;\nuniform vec2 dimensions;\nuniform float strength;\n\nvoid main(void) {\n vec2 onePixel = vec2(1.0, 1.0) / dimensions;\n \n vec4 color = texture2D(uSampler, vTextureCoord);\n vec4 top = texture2D(uSampler, vTextureCoord - vec2(0.0, onePixel.y));\n vec4 bottom = texture2D(uSampler, vTextureCoord + vec2(0.0, onePixel.y));\n vec4 left = texture2D(uSampler, vTextureCoord - vec2(onePixel.x, 0.0));\n vec4 right = texture2D(uSampler, vTextureCoord + vec2(onePixel.x, 0.0));\n \n vec4 result = color * (1.0 + 4.0 * strength) - (top + bottom + left + right) * strength;\n \n gl_FragColor = result;\n}"; var grayscaleShader = "// src/shaders/grayscale.frag\nprecision mediump float;\n\nvarying vec2 vTextureCoord;\nuniform sampler2D uSampler;\n\nvoid main(void) {\n vec4 color = texture2D(uSampler, vTextureCoord);\n float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));\n gl_FragColor = vec4(vec3(gray), color.a);\n}"; var invertShader = "// src/shaders/invert.frag\nprecision mediump float;\n\nvarying vec2 vTextureCoord;\nuniform sampler2D uSampler;\n\nvoid main(void) {\n vec4 color = texture2D(uSampler, vTextureCoord);\n gl_FragColor = vec4(1.0 - color.rgb, color.a);\n}"; var vintageShader = "// src/shaders/vintage.frag\nprecision mediump float;\n\nvarying vec2 vTextureCoord;\nuniform sampler2D uSampler;\nuniform float sepia; // 复古程度\nuniform float noise; // 噪点强度\nuniform float scratch; // 划痕强度\n\n// 随机数生成\nfloat rand(vec2 co) {\n return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);\n}\n\nvoid main(void) {\n vec4 color = texture2D(uSampler, vTextureCoord);\n \n // 转换为复古色调\n vec3 sepiaColor = vec3(\n color.r * 0.393 + color.g * 0.769 + color.b * 0.189,\n color.r * 0.349 + color.g * 0.686 + color.b * 0.168,\n color.r * 0.272 + color.g * 0.534 + color.b * 0.131\n );\n \n // 添加噪点\n float randomValue = rand(vTextureCoord);\n vec3 noiseColor = mix(color.rgb, vec3(randomValue), noise);\n \n // 添加划痕效果\n float scratchValue = rand(vec2(vTextureCoord.y, 0.0)) * scratch;\n vec3 finalColor = mix(noiseColor, vec3(1.0), scratchValue);\n \n // 混合原始颜色和复古效果\n finalColor = mix(color.rgb, mix(finalColor, sepiaColor, sepia), sepia);\n \n gl_FragColor = vec4(finalColor, color.a);\n}"; var colorSplitShader = "// src/shaders/color-split.frag\nprecision mediump float;\n\nvarying vec2 vTextureCoord;\nuniform sampler2D uSampler;\nuniform vec2 offset; // RGB分离偏移量\nuniform float angle; // 分离角度\n\nvoid main(void) {\n // 计算旋转后的偏移向量\n float rad = angle * 3.14159 / 180.0;\n vec2 rotatedOffset = vec2(\n offset.x * cos(rad) - offset.y * sin(rad),\n offset.x * sin(rad) + offset.y * cos(rad)\n );\n \n // 采样三个颜色通道\n vec4 red = texture2D(uSampler, vTextureCoord + rotatedOffset);\n vec4 green = texture2D(uSampler, vTextureCoord);\n vec4 blue = texture2D(uSampler, vTextureCoord - rotatedOffset);\n \n gl_FragColor = vec4(red.r, green.g, blue.b, green.a);\n}"; var mosaicShader = " precision mediump float;\n\n varying vec2 vTextureCoord;\n uniform sampler2D uSampler;\n uniform vec2 uResolution;\n uniform vec2 uTileSize;\n\n void main(void) {\n // 计算像素坐标\n vec2 pixelCoord = vTextureCoord * uResolution - 0.5;\n\n // 计算马赛克块坐标\n vec2 mosaicBlock = floor(pixelCoord / uTileSize) * uTileSize + uTileSize * 0.5;\n\n // 采样马赛克块中心的颜色\n vec2 mosaicTexCoord = (mosaicBlock + 0.5) / uResolution;\n gl_FragColor = texture2D(uSampler, mosaicTexCoord);\n }\n"; var brightnessShader = "precision mediump float;\n\nvarying vec2 vTextureCoord;\nuniform sampler2D uSampler;\nuniform float brightness;\n\nvoid main(void) {\n vec4 color = texture2D(uSampler, vTextureCoord);\n \n // 调整亮度\n vec3 rgb = color.rgb * brightness;\n \n // 输出调整后的颜色\n gl_FragColor = vec4(rgb, color.a);\n}\n"; var contrastShader = "precision mediump float;\n\nvarying vec2 vTextureCoord;\nuniform sampler2D uSampler;\nuniform float contrast;\n\nvoid main(void) {\n vec4 color = texture2D(uSampler, vTextureCoord);\n \n // 计算对比度调整\n // 对比度公式: (color - 0.5) * contrast + 0.5\n vec3 rgb = (color.rgb - 0.5) * contrast + 0.5;\n \n // 输出调整后的颜色\n gl_FragColor = vec4(rgb, color.a);\n}\n"; var grayscaleAdjustShader = "precision mediump float;\n\nvarying vec2 vTextureCoord;\nuniform sampler2D uSampler;\nuniform float grayIntensity;\n\nvoid main(void) {\n vec4 color = texture2D(uSampler, vTextureCoord);\n \n // 计算灰度值\n float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));\n \n // 根据强度混合原始颜色和灰度\n vec3 result = mix(color.rgb, vec3(gray), grayIntensity);\n \n gl_FragColor = vec4(result, color.a);\n}\n"; var invertAdjustShader = "precision mediump float;\n\nvarying vec2 vTextureCoord;\nuniform sampler2D uSampler;\nuniform float invertIntensity;\n\nvoid main(void) {\n vec4 color = texture2D(uSampler, vTextureCoord);\n\n // 计算反相颜色\n vec3 invertedColor = 1.0 - color.rgb;\n\n // 根据强度混合原始颜色和反相颜色\n vec3 result = mix(color.rgb, invertedColor, invertIntensity);\n\n gl_FragColor = vec4(result, color.a);\n}\n"; var sepiaCustomShader = "precision mediump float;\n\nvarying vec2 vTextureCoord;\nuniform sampler2D uSampler;\nuniform float sepiaIntensity;\n\nvoid main(void) {\n vec4 color = texture2D(uSampler, vTextureCoord);\n\n // 计算褐色效果\n float r = color.r * 0.393 + color.g * 0.769 + color.b * 0.189;\n float g = color.r * 0.349 + color.g * 0.686 + color.b * 0.168;\n float b = color.r * 0.272 + color.g * 0.534 + color.b * 0.131;\n\n // 根据强度混合原始颜色和褐色效果\n vec3 sepiaColor = vec3(r, g, b);\n vec3 result = mix(color.rgb, sepiaColor, sepiaIntensity);\n\n gl_FragColor = vec4(result, color.a);\n}\n"; // 创建自然效果滤镜 var createNaturalFilter = function (sprite, filterParams) { var defaultParams = { brightness: 1.05, // 亮度 saturation: 1.05, // 饱和度 contrast: 1.05, // 对比度 temperature: 0.05, // 色温 gamma: 1.05, // 伽马值 }; return new PIXI.Filter("", naturalShader, __assign(__assign({}, defaultParams), filterParams)); }; // 创建去雾效果滤镜 var createDefoggingFilter = function (sprite, filterParams) { var defaultParams = { fogAmount: 0.8, // 去雾强度 }; return new PIXI.Filter("", defoggingShader, __assign(__assign({}, defaultParams), filterParams)); }; // 创建锐化效果滤镜 var createSharpenFilter = function (sprite, filterParams) { var defaultParams = { strength: 0.5, // 锐化强度 }; return new PIXI.Filter("", sharpenShader, __assign(__assign({ dimensions: [sprite.width, sprite.height] }, defaultParams), filterParams)); }; // 创建黑白效果滤镜 var createGrayscaleFilter = function (sprite, filterParams) { return new PIXI.Filter("", grayscaleShader); }; // 创建反色效果滤镜 var createInvertFilter = function (sprite, filterParams) { return new PIXI.Filter("", invertShader); }; // 创建老照片效果滤镜 var createVintageFilter = function (sprite, filterParams) { var defaultParams = { sepia: 0.8, // 80%的复古程度 noise: 0.2, // 20%的噪点 scratch: 0.1, // 10%的划痕 }; return new PIXI.Filter("", vintageShader, __assign(__assign({}, defaultParams), filterParams)); }; /** * 创建高斯模糊滤镜 * @param {PIXI.Sprite} sprite - 需要应用模糊效果的精灵对象 * @param {Object} options - 模糊效果的配置选项 * @returns {TiltShiftFilter} 返回倾斜位移滤镜实例 */ var createGaussianBlurFilter = function (sprite, filterParams) { var startPoint = new PIXI.Point(0, 0); var endPoint = new PIXI.Point(sprite.width, sprite.height); return new TiltShiftFilter(50, 0, startPoint, endPoint); }; // 创建色调分离滤镜 var createColorSplitFilter = function (sprite, filterParams) { var defaultParams = { offset: [5.0, 0.0], // 水平偏移5个像素 angle: 0.0, // 初始角度为0度 }; return new PIXI.Filter("", colorSplitShader, __assign(__assign({}, defaultParams), filterParams)); }; // 创建马赛克效果滤镜 var createMosaicFilter = function (sprite, filterParams) { var _a, _b; console.log("createMosaicFilter", sprite.width, sprite.height); var defaultParams = { uTileSize: { x: 10, y: 10 }, // 像素块大小 }; var autoFilterParams = { uTileSize: { x: (_a = filterParams === null || filterParams === void 0 ? void 0 : filterParams.uTileSizeX) !== null && _a !== void 0 ? _a : 10, y: (_b = filterParams === null || filterParams === void 0 ? void 0 : filterParams.uTileSizeY) !== null && _b !== void 0 ? _b : 10, }, // 像素块大小 }; return new PIXI.Filter("", mosaicShader, __assign(__assign({ uResolution: { x: sprite.width, y: sprite.height } }, defaultParams), autoFilterParams)); }; // 定义模糊滤镜 var createBlurFilter = function (sprite, filterParams) { var _a; var defaultParams = { blur: (_a = filterParams === null || filterParams === void 0 ? void 0 : filterParams.blur) !== null && _a !== void 0 ? _a : 0, // 模糊程度 }; var startPoint = new PIXI.Point(0, 0); var endPoint = new PIXI.Point(sprite.width, sprite.height); return new TiltShiftFilter(defaultParams.blur, 0, startPoint, endPoint); }; // 创建亮度调整滤镜 var createBrightnessFilter = function (sprite, filterParams) { var defaultParams = { brightness: 1.0, // 默认亮度值,1.0表示原始亮度 }; return new PIXI.Filter("", brightnessShader, __assign(__assign({}, defaultParams), filterParams)); }; // 创建对比度调整滤镜 var createContrastFilter = function (sprite, filterParams) { var defaultParams = { contrast: 1.0, // 默认对比度值,1.0表示原始对比度 }; return new PIXI.Filter("", contrastShader, __assign(__assign({}, defaultParams), filterParams)); }; // 创建灰度调整滤镜 var createGrayscaleAdjustFilter = function (sprite, filterParams) { var defaultParams = { grayIntensity: 1.0, // 默认灰度强度,1.0表示完全灰度 }; return new PIXI.Filter("", grayscaleAdjustShader, __assign(__assign({}, defaultParams), filterParams)); }; // 创建反相调整滤镜 var createInvertAdjustFilter = function (sprite, filterParams) { var defaultParams = { invertIntensity: 1.0, // 默认反相强度,1.0表示完全反相 }; return new PIXI.Filter("", invertAdjustShader, __assign(__assign({}, defaultParams), filterParams)); }; // 创建饱和度调整滤镜 var createSaturationFilter = function (sprite, filterParams) { var defaultParams = __assign({ saturation: 1.0 }, filterParams); // 创建颜色矩阵滤镜 var colorMatrix = new PIXI.ColorMatrixFilter(); // 应用饱和度调整并返回滤镜实例 colorMatrix.saturate(defaultParams.saturation); return colorMatrix; }; // 创建自定义褐色调整滤镜 var createCustomSepiaFilter = function (sprite, filterParams) { var defaultParams = { sepiaIntensity: 1.0, // 默认褐色强度,1.0表示完全褐色效果 }; return new PIXI.Filter("", sepiaCustomShader, __assign(__assign({}, defaultParams), filterParams)); }; // 创建褐色调整滤镜 // export const createSepiaFilter = ( // sprite: PIXI.Sprite, // filterParams // ): PIXI.Filter => { // const defaultParams = { // sepia: 1.0, // 默认褐色强度,1.0表示完全褐色效果 // ...filterParams, // }; // // 创建颜色矩阵滤镜 // const colorMatrix = new PIXI.ColorMatrixFilter(); // // 应用褐色调整并返回滤镜实例 // colorMatrix.sepia(defaultParams.sepia); // return colorMatrix; // }; // 定义滤镜参数的取值范围和步长 var filterParamsRange = { natural: { brightness: { min: 0.5, max: 2.0, step: 0.05, label: "亮度" }, saturation: { min: 0.0, max: 2.0, step: 0.05, label: "饱和度" }, contrast: { min: 0.5, max: 2.0, step: 0.05, label: "对比度" }, temperature: { min: -0.5, max: 0.5, step: 0.05, label: "色温" }, gamma: { min: 0.5, max: 2.0, step: 0.05, label: "伽马值" }, }, defogging: { fogAmount: { min: 0.0, max: 1.0, step: 0.1, label: "去雾强度" }, }, sharpen: { strength: { min: 0.0, max: 1.0, step: 0.1, label: "锐化强度" }, }, vintage: { sepia: { min: 0.0, max: 1.0, step: 0.1, label: "复古程度" }, noise: { min: 0.0, max: 1.0, step: 0.1, label: "噪点" }, scratch: { min: 0.0, max: 1.0, step: 0.1, label: "划痕" }, }, colorSplit: { offset: { min: 0.0, max: 10.0, step: 1.0, label: "偏移量", }, angle: { min: 0.0, max: 360.0, step: 15.0, label: "角度" }, }, mosaic: { uTileSizeX: { min: 1, max: 50, step: 1, label: "横向像素块大小" }, uTileSizeY: { min: 1, max: 50, step: 1, label: "纵向像素块大小" }, }, blurFilter: { blur: { min: 0.0, max: 100.0, step: 0.1, label: "模糊程度" }, }, brightness: { brightness: { min: 0.0, max: 5.0, step: 0.1, label: "亮度" }, }, contrast: { contrast: { min: 0.0, max: 5.0, step: 0.1, label: "对比度" }, }, grayscaleAdjust: { grayIntensity: { min: 0.0, max: 1.0, step: 0.05, label: "灰度强度" }, }, invertAdjust: { invertIntensity: { min: 0.0, max: 1.0, step: 0.05, label: "反相强度" }, }, saturation: { saturation: { min: 0.0, max: 3.0, step: 0.1, label: "饱和度" }, }, customSepia: { sepiaIntensity: { min: 0.0, max: 1.2, step: 0.05, label: "自定义褐色强度" }, }, }; var PixiFilter = /** @class */ (function () { function PixiFilter(options) { if (options === void 0) { options = {}; } this.sprite = null; this.currentFilter = null; this.isDestroyed = false; this.app = new PIXI.Application({ width: options.width || 800, height: options.height || 800, backgroundColor: "#ffffff00", backgroundAlpha: 0, antialias: true, preserveDrawingBuffer: true, clearBeforeRender: true }); } /** * 加载图片并创建精灵 * @param imageSource - 图片源(URL或Base64) * @param forceUpdate - 是否强制更新图片,默认为true。设置为false时,如果已有图片则不会重新加载 */ PixiFilter.prototype.loadImage = function (imageSource_1) { return __awaiter(this, arguments, void 0, function (imageSource, forceUpdate) { var texture, error_1; if (forceUpdate === void 0) { forceUpdate = true; } return __generator(this, function (_a) { switch (_a.label) { case 0: if (this.isDestroyed) { throw new Error("PixiFilter instance has been destroyed"); } _a.label = 1; case 1: _a.trys.push([1, 3, , 4]); // 如果forceUpdate为false且已有sprite,则不重新加载图片 if (!forceUpdate && this.sprite) { return [2 /*return*/]; } if (this.sprite) { this.app.stage.removeChild(this.sprite); this.sprite.destroy(); } return [4 /*yield*/, PIXI.Assets.load(imageSource)]; case 2: texture = _a.sent(); this.sprite = new PIXI.Sprite(texture); this.sprite.width = this.app.screen.width; this.sprite.height = this.app.screen.height; this.app.stage.addChild(this.sprite); return [3 /*break*/, 4]; case 3: error_1 = _a.sent(); throw new Error("Failed to load image: ".concat(error_1)); case 4: return [2 /*return*/]; } }); }); }; /** * 应用滤镜效果 * @param filterData - 包含滤镜类型和标签的数据,或直接传入滤镜类型 * @returns 处理后的数据,包含滤镜类型、标签和处理结果 */ PixiFilter.prototype.applyFilter = function (filterData) { var _a, _b; if (!this.sprite) { throw new Error("No image loaded"); } // 处理直接传入FilterType的情况 var filterType = filterData.filterType; var normalizedFilterData = filterData; // 处理滤镜叠加 // const shouldOverlay = normalizedFilterData?.overlay ?? false; // if (!shouldOverlay && this.currentFilter) { // this.sprite.filters = []; // } // 创建新滤镜 var filterCreator = this.getFilterCreator(filterType); if (!filterCreator) { throw new Error("Unsupported filter type: ".concat(filterType)); } // 检查是否应用滤镜,默认为true var shouldApplyFilter = (_a = normalizedFilterData === null || normalizedFilterData === void 0 ? void 0 : normalizedFilterData.applyFilter) !== null && _a !== void 0 ? _a : true; if (shouldApplyFilter) { // 应用滤镜 // 创建基础滤镜并应用自定义参数 this.currentFilter = filterCreator(this.sprite, (_b = normalizedFilterData === null || normalizedFilterData === void 0 ? void 0 : normalizedFilterData.filterParams) !== null && _b !== void 0 ? _b : null); // 只有当滤镜存在时才应用滤镜,否则保持原图 if (this.currentFilter) { this.sprite.filters = [this.currentFilter]; } else { this.sprite.filters = []; } } else { // 不应用滤镜,保持原图 this.sprite.filters = []; this.currentFilter = null; } // 渲染并返回结果 return this.getProcessedImageData(normalizedFilterData); }; /** * 批量应用多个滤镜效果 * @param filterDataArray - 滤镜数据数组,每个元素包含滤镜类型和标签 * @returns 处理后的数据数组,每个元素包含滤镜类型和处理结果 */ PixiFilter.prototype.applyFilterWithParams = function (filterDataArray) { var _this = this; if (!this.sprite) { throw new Error("No image loaded"); } // 清空现有滤镜 this.sprite.filters = []; // 依次应用每个滤镜,并将其添加到滤镜数组中 filterDataArray.forEach(function (filterData) { var _a; var filterType = filterData.filterType; var filterCreator = _this.getFilterCreator(filterType); if (!filterCreator) { throw new Error("Unsupported filter type: ".concat(filterType)); } // 创建滤镜并应用参数 var filter = filterCreator(_this.sprite, (_a = filterData.filterParams) !== null && _a !== void 0 ? _a : null); // 将新滤镜添加到滤镜数组中 _this.sprite.filters = __spreadArray(__spreadArray([], __read((_this.sprite.filters || [])), false), [filter], false); }); // 使用最后一个滤镜数据作为返回数据的基础,但结果包含所有滤镜的叠加效果 var lastFilterData = filterDataArray[filterDataArray.length - 1]; return this.getProcessedImageData(lastFilterData); }; PixiFilter.prototype.applyFilters = function (filterDataArray) { var _this = this; if (!this.sprite) { throw new Error("No image loaded"); } return filterDataArray.map(function (filterData) { return _this.applyFilter(filterData); }); }; /** * 获取处理后的图片数据 * @param data - 包含滤镜类型和标签的数据 * @returns 处理后的数据,包含滤镜类型、标签和处理结果 */ PixiFilter.prototype.getProcessedImageData = function (data) { var _a, _b; this.app.render(); // 将 app.view 转换为 HTMLCanvasElement 以使用 toDataURL 方法 var canvas = this.app.view; var params = { filterType: data.filterType, label: data.label, result: canvas.toDataURL("image/png"), active: false, filterParams: (_a = data === null || data === void 0 ? void 0 : data.filterParams) !== null && _a !== void 0 ? _a : null, applyFilter: (_b = data === null || data === void 0 ? void 0 : data.applyFilter) !== null && _b !== void 0 ? _b : true, }; return params; }; /** * 获取滤镜创建函数 */ PixiFilter.prototype.getFilterCreator = function (filterType) { var filterMap = { natural: createNaturalFilter, defogging: createDefoggingFilter, sharpen: createSharpenFilter, grayscale: createGrayscaleFilter, invert: createInvertFilter, vintage: createVintageFilter, mosaic: createMosaicFilter, gaussian: createGaussianBlurFilter, colorSplit: createColorSplitFilter, blurFilter: createBlurFilter, // 添加模糊滤镜 brightness: createBrightnessFilter, // 添加亮度滤镜 contrast: createContrastFilter, // 添加对比度滤镜 grayscaleAdjust: createGrayscaleAdjustFilter, // 添加灰度调整滤镜 invertAdjust: createInvertAdjustFilter, // 添加反相调整滤镜 saturation: createSaturationFilter, // 添加饱和度调整滤镜 customSepia: createCustomSepiaFilter, // 添加棕褐色滤镜 }; return filterMap[filterType]; }; /** * 销毁实例 */ PixiFilter.prototype.destroy = function () { if (this.isDestroyed) { return; } if (this.sprite) { this.sprite.destroy(); this.sprite = null; } if (this.currentFilter) { this.currentFilter = null; } if (this.app) { this.app.destroy(true, { children: true, texture: true, baseTexture: true, }); } this.isDestroyed = true; }; return PixiFilter; }()); export { PixiFilter, filterParamsRange };