65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
|
|
||
|
|
import {ref} from 'vue'
|
||
|
|
import html2canvas from 'html2canvas';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 用于导出生成image
|
||
|
|
*/
|
||
|
|
export function useExportImage() {
|
||
|
|
|
||
|
|
const exportRef = ref();
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 导出图片触发事件
|
||
|
|
* @param fileName
|
||
|
|
*/
|
||
|
|
function onExportImage(fileName) {
|
||
|
|
let ele = exportRef.value;
|
||
|
|
if(!ele){
|
||
|
|
console.error('没有导出对象')
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const size = {
|
||
|
|
width: ele.offsetWidth,
|
||
|
|
height: ele.offsetHeight
|
||
|
|
}
|
||
|
|
html2canvas(ele, { useCORS: true, logging: true }).then(async (canvas) => {
|
||
|
|
const dataURL = canvas.toDataURL('image/png');
|
||
|
|
await download(dataURL, size, fileName);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async function download(imgUrl, size, fileName) {
|
||
|
|
const dataUrl = await getBase64(imgUrl, size);
|
||
|
|
const link:any = document.createElement('a');
|
||
|
|
link.href = dataUrl;
|
||
|
|
link.download = `${fileName}.png`;
|
||
|
|
link.click();
|
||
|
|
}
|
||
|
|
|
||
|
|
function getBase64(url, size){
|
||
|
|
return new Promise((resolve) => {
|
||
|
|
let canvas:any = document.createElement('canvas');
|
||
|
|
const ctx = canvas.getContext('2d');
|
||
|
|
const img = new Image();
|
||
|
|
// 允许跨域
|
||
|
|
img.crossOrigin = 'Anonymous';
|
||
|
|
img.src = url;
|
||
|
|
img.onload = () => {
|
||
|
|
// eslint-disable-next-line prefer-destructuring
|
||
|
|
canvas.height = size.height;
|
||
|
|
// eslint-disable-next-line prefer-destructuring
|
||
|
|
canvas.width = size.width;
|
||
|
|
ctx!.drawImage(img, 0, 0, size.width, size.height);
|
||
|
|
const dataURL = canvas.toDataURL('image/png');
|
||
|
|
canvas = null;
|
||
|
|
resolve(dataURL);
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
exportRef,
|
||
|
|
onExportImage
|
||
|
|
}
|
||
|
|
}
|