FiDA_Front/src/components/Canvas/DepthCanvas/tools/exportMethod.js

import { createStaticCanvas } from './canvasFactory'
import { getObjectsBoundingBox, cloneObjects } from './canvasMethod'
/**  导出画布为图片 */
export async function exportCanvasToImage(canvas) {
	const clonedObjects = await cloneObjects(canvas.getObjects())
	const staticCanvas = createStaticCanvas(document.createElement('canvas'))
	const width = canvas.clipPath.width
	const height = canvas.clipPath.height
	staticCanvas.setWidth(width)
	staticCanvas.setHeight(height)
	clonedObjects.forEach(obj => staticCanvas.add(obj))
	// 导出图片
	const dataURL = staticCanvas.toDataURL({
		type: 'image/png',
		quality: 1,
	})
	return dataURL
}
/**  导出指定对象 */
export async function exportObjectsToImage(objects = [], isDetails = false) {
	const clonedObjects = await cloneObjects(objects)
	const boundingBox = await getObjectsBoundingBox(clonedObjects)
	const staticCanvas = createStaticCanvas(document.createElement('canvas'))
	staticCanvas.setWidth(boundingBox.width)
	staticCanvas.setHeight(boundingBox.height)
	clonedObjects.forEach(obj => {
		obj.set({
			left: obj.left - boundingBox.left,
			top: obj.top - boundingBox.top,
		})
		staticCanvas.add(obj)
	})
	// 导出图片
	const dataURL = staticCanvas.toDataURL({
		type: 'image/png',
		quality: 1,
	})
	return isDetails ? {
		url: dataURL,
		...boundingBox,
	} : dataURL
}