|
@@ -82,10 +82,41 @@ export const svgtopng = async (svg: any, width: any, height: any) => {
|
|
|
|
|
|
// Render only first frame, ignoring animations and mouse.
|
|
|
await v.start()
|
|
|
- const blob = await canvas.convertToBlob()
|
|
|
- const base64 = await blobToBase64(blob)
|
|
|
+ // const blob = await canvas.convertToBlob()
|
|
|
+ // const base64 = await blobToBase64(blob)
|
|
|
+ const base64 = await canvasAddPadding(canvas)
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
|
|
await v.stop()
|
|
|
v = null
|
|
|
return base64
|
|
|
}
|
|
|
+
|
|
|
+const convertToBlob = (canvas: any) => {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ canvas.toBlob(resolve)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const canvasAddPadding = async (sourceCanvas: any) => {
|
|
|
+ const targetCanvas = document.createElement("canvas")
|
|
|
+ targetCanvas.width = sourceCanvas.width + 400
|
|
|
+ targetCanvas.height = sourceCanvas.height + 100
|
|
|
+ // 坐标(0,0) 表示从此处开始绘制,相当于偏移。
|
|
|
+ const targetContext = targetCanvas.getContext("2d") as CanvasRenderingContext2D
|
|
|
+
|
|
|
+ const sourceContext = sourceCanvas.getContext("2d") as CanvasRenderingContext2D
|
|
|
+
|
|
|
+ // 从源canvas中获取图像数据
|
|
|
+ const imageData = sourceContext.getImageData(0, 0, sourceCanvas.width, sourceCanvas.height)
|
|
|
+
|
|
|
+ // 清空目标canvas
|
|
|
+ targetContext.clearRect(0, 0, targetCanvas.width, targetCanvas.height)
|
|
|
+
|
|
|
+ // 将图像数据绘制到目标canvas上,并添加边距
|
|
|
+ targetContext.putImageData(imageData, 200, 50)
|
|
|
+
|
|
|
+ const blob = await convertToBlob(targetCanvas)
|
|
|
+ const base64 = await blobToBase64(blob)
|
|
|
+ targetContext.clearRect(0, 0, targetCanvas.width, targetCanvas.height)
|
|
|
+ return base64
|
|
|
+}
|