|
|
@@ -54,7 +54,7 @@ export const addMusicTitle = (canvas: any, title: any) => {
|
|
|
}
|
|
|
|
|
|
let canvas = null as any
|
|
|
-export const svgtoblob = async (svg: any, width: any, height: any, name: string) => {
|
|
|
+export const svgtoblob = async (svg: any, width: any, height: any, name: string, isShowPadding = true) => {
|
|
|
if (!canvas) {
|
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
|
// @ts-ignore
|
|
|
@@ -77,38 +77,13 @@ export const svgtoblob = async (svg: any, width: any, height: any, name: string)
|
|
|
await v.start()
|
|
|
// const blob = await canvas.convertToBlob()
|
|
|
// const base64 = await blobToBase64(blob)
|
|
|
- const base64 = await canvasAddPadding(canvas, name)
|
|
|
+ const base64 = await canvasAddPadding(canvas, name, isShowPadding)
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
|
|
await v.stop()
|
|
|
v = null
|
|
|
return base64
|
|
|
}
|
|
|
|
|
|
-// export const svgtopng = async (svg: any, width: any, height: any) => {
|
|
|
-// let canvas: any = new OffscreenCanvas(width, height);
|
|
|
-// const ctx = canvas.getContext("2d")!;
|
|
|
-// let v: any = await Canvg.fromString(ctx!, svg, preset);
|
|
|
-
|
|
|
-// /**
|
|
|
-// * Resize SVG to fit in given size.
|
|
|
-// * @param width
|
|
|
-// * @param height
|
|
|
-// * @param preserveAspectRatio
|
|
|
-// */
|
|
|
-// v.resize(width / 1.2, height / 1.2, "xMidYMid meet");
|
|
|
-
|
|
|
-// // Render only first frame, ignoring animations and mouse.
|
|
|
-// await v.start();
|
|
|
-// let blob: any = await canvas.convertToBlob();
|
|
|
-// const base64 = await blobToBase64(blob);
|
|
|
-// ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
-// canvas = null;
|
|
|
-// v.stop();
|
|
|
-// v = null;
|
|
|
-// blob = null;
|
|
|
-// return base64;
|
|
|
-// };
|
|
|
-
|
|
|
const convertToBlob = (canvas: any, type = "image/png") => {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
canvas.toBlob((blob: Blob) => {
|
|
|
@@ -121,10 +96,10 @@ const convertToBlob = (canvas: any, type = "image/png") => {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-const canvasAddPadding = async (sourceCanvas: any, name: string) => {
|
|
|
+const canvasAddPadding = async (sourceCanvas: any, name: string, isShowPadding = true) => {
|
|
|
const targetCanvas = document.createElement("canvas")
|
|
|
- targetCanvas.width = sourceCanvas.width + 400
|
|
|
- targetCanvas.height = sourceCanvas.height + 200
|
|
|
+ targetCanvas.width = sourceCanvas.width + (isShowPadding ? 400 : 160)
|
|
|
+ targetCanvas.height = sourceCanvas.height + (isShowPadding ? 200 : 0)
|
|
|
|
|
|
// 坐标(0,0) 表示从此处开始绘制，相当于偏移。
|
|
|
const targetContext = targetCanvas.getContext("2d") as CanvasRenderingContext2D
|
|
|
@@ -145,14 +120,14 @@ const canvasAddPadding = async (sourceCanvas: any, name: string) => {
|
|
|
|
|
|
// 小水印画布大小
|
|
|
// const waterCtx = water.getContext("2d") as CanvasRenderingContext2D
|
|
|
- targetContext.font = `66pt Calibri`
|
|
|
+ targetContext.font = `30pt Calibri`
|
|
|
targetContext.fillStyle = "#000"
|
|
|
targetContext.textAlign = "center"
|
|
|
- targetContext.drawImage(sourceCanvas, 200, 240)
|
|
|
- targetContext.fillText(name, targetCanvas.width / 2, 200)
|
|
|
+ targetContext.drawImage(sourceCanvas, isShowPadding ? 200 : 80, isShowPadding ? 240 : 40)
|
|
|
+ targetContext.fillText(name, targetCanvas.width / 2, isShowPadding ? 200 : 60)
|
|
|
|
|
|
const blob = await convertToBlob(targetCanvas)
|
|
|
- // const base64 = await blobToBase64(blob)
|
|
|
+ const base64 = await blobToBase64(blob)
|
|
|
targetContext.clearRect(0, 0, targetCanvas.width, targetCanvas.height)
|
|
|
return blob
|
|
|
}
|
