OffScreenCanvasBuilder abstract class

重要api,它被Gesti.installPlugin使用。它需要被开发者创建对象并传入所需的离屏画布。 如果你的Gesti运行在纯H5端，可以跳过本页。

它是什么：

  • 它是一个预设插件，用于解决多个平台兼容性问题。

它能做什么：

  • 在 Gesti 运行的各种平台中，由于每个平台的 API 不同，可能会导致效果上的差异。
  • Gesti 并不会直接判断和获取 API，而是需要开发者自己提供所需的 API。
  • OffScreenCanvasBuilder 就是这些 API 的清单，用于构建离屏 Canvas 和相关上下文等。

Methods（方法）

属性类型描述
offScreenCanvasBuilder(width: number, height: number) => any用于构建离屏 Canvas 的函数。
offScreenContextBuilder(offScreenCanvas: any) => any用于构建离屏 Canvas 上下文的函数。
imageBuilder(url: string, width: number, height: number, offCanvas: any) => HTMLImageElement | any用于构建图片的函数。
paintBuilder() => CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D用于构建绘图上下文的函数。
buildImageData(ctx: any, width: number, height: number) => ImageData用于构建 ImageData 对象的函数。
proxyGetImageData(ctx: any, sx: number, sy: number, sw: number, sh: number) => Promise<ImageData> | null代理获取图像数据的函数。
buildMergedImage(source: CanvasImageSource | Blob | ImageData, width: number, height: number) => Promise<HTMLImageElement | ImageBitmap>用于构建合并图像的函数，返回一个可以被 drawImage 渲染的对象。

一些常见的Builder

uniapp h5


import Gesti, {
	OffScreenCanvasBuilder
} from "gesti";

export const h5Builder = new OffScreenCanvasBuilder({
	offScreenCanvasBuilder(width, height) {
		return uni.createCanvasContext("offScreenCanvas");
	},
	offScreenContextBuilder(offCanvas) {
		return uni.createCanvasContext("offScreenCanvas");
	},
	proxyGetImageData(ctx, sx, sy, sw, sh) {
		return new Promise((r, v) => {
			uni.canvasGetImageData({
				canvasId: "offScreenCanvas",
				x: sx,
				y: sy,
				width: sw,
				height: sh,
				success(res) {
					r(res);
				},
				fail(err) {
					console.log("失败", err);
					v(err);
				},
				complete() {
					console.log("最终")
				}
			}, this)
		})
	},
	buildImageData(canvas, width, height) {
		return new ImageData(width, height);
	},
	imageBuilder(url, width, height) {
		return new Promise(r => {
			uni.downloadFile({
				url: url,
				success: (res) => {
					r(res.tempFilePath);
				},
				fail: (err) => {

				}
			})
		})
	},
	buildMergedImage(data, width, height) {
		return new Promise((r, v) => {
			uni.canvasPutImageData({
				canvasId: 'offScreenCanvas',
				x: 0,
				y: 0,
				width,
				height,
				data: data.data,
				success(res) {
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width,
						height,
						destWidth: width,
						destHeight: height,
						canvasId: 'offScreenCanvas',
						success: function(res) {
							r(res.tempFilePath)
						},
						fail(err) {
							console.log("转存失败", err)
						}
					})
				},
				fail(err) {
					v()
					console.log("PutImage失败", err)
				}
			})

		})
	}
});

uniapp wechat


import Gesti, {
	OffScreenCanvasBuilder
} from "gesti";

export const wechatBuilder = new OffScreenCanvasBuilder({
	offScreenCanvasBuilder(width, height) {
		const offScreen=wx.createOffscreenCanvas({
			type: '2d',
			width: width,
			height: height
		});
		return offScreen;
	},
	offScreenContextBuilder(offscreen) {
		const context= offscreen.getContext("2d");
		return context;
	},
	imageBuilder(url, width, height, offCanvas) {
		const image = offCanvas.createImage();
		image.src = url;
		return Promise.resolve(image);
	},
	proxyGetImageData(ctx, sx, sy, sw, sh) {
		const imageData = ctx.getImageData(sx, sy, sw, sh);
		return Promise.resolve(imageData);
	},
	buildImageData(canvas, width, height) {
		const imageData = canvas.createImageData(
			new Uint8ClampedArray(width * height * 4),
			width,
			height
		);
		return imageData
	},
	buildMergedImage(source, width, height) {
		const offCanvas = wx.createOffscreenCanvas({
			type: '2d',
			width,
			height
		});
		const g = offCanvas.getContext("2d");
		g.putImageData(source, 0, 0);
		const image = offCanvas.createImage();
		image.src = offCanvas.toDataURL();
		return Promise.resolve(image)
	}
});

uniapp 抖音


import Gesti, {
	OffScreenCanvasBuilder
} from "gesti";

export const toutiaoBuilder = (canvas)=>{
	return new OffScreenCanvasBuilder({
		offScreenCanvasBuilder(width, height) {
			const offScreen=tt.createOffscreenCanvas({
				type: '2d',
				width: width,
				height: height
			});
			return offScreen;
		},
		offScreenContextBuilder(offscreen) {
			const context= offscreen.getContext("2d");
			return context;
		},
		imageBuilder(url, width, height, offCanvas) {
			const image = canvas.createImage();
			image.src = url;
			return Promise.resolve(image);
		},
		proxyGetImageData(ctx, sx, sy, sw, sh) {
			const imageData = ctx.getImageData(sx, sy, sw, sh);
			return Promise.resolve(imageData);
		},
		buildImageData(canvas, width, height) {
			const imageData = canvas.createImageData(
				new Uint8ClampedArray(width * height * 4),
				width,
				height
			);
			return imageData
		},
		buildMergedImage(source, width, height) {
			const offCanvas = tt.createOffscreenCanvas({
				type: '2d',
				width,
				height
			});
			const g = offCanvas.getContext("2d");
			g.putImageData(source, 0, 0);
			const image = offCanvas.createImage();
			image.src = offCanvas.toDataURL();
			return Promise.resolve(image)
		}
	});
}