在项目中,模板配置需要获取实时效果,来作为用户展示的封面图,采用页面生成图片的方法才生成图片。
// 截图生成封面并保存
function exportImg() {
dispatch({ type: 'LOADING', loading: true })
html2canvas(document.querySelector('#drag-body'), { // 转换为图片
useCORS: true // 解决资源跨域问题
}).then(canvas => {
// imgUrl 是图片的 base64格式 代码 png 格式
let imgUrl = canvas.toDataURL('image/png');
const d = getUintArray(imgUrl);
const formData = new FormData();
formData.append('resourceType', 1);
formData.append('published', 'N');
formData.append('organization', '');
formData.append('file', d, '封面.png');
reqwest({
// url: '/HwapiService/media/upload',
url: '/PictureServer/uploadStaticResWithNoToken',
method: 'post',
data: formData,
processData: false,
contentType: false,
headers: {
Authorization: get() ? `${get().tokenType} ${get().accessToken}` : null,
},
success: (res) => {
if (res?.subCode === 0) {
const imgUrl = res?.data?.imgUrl;
saveAll(imgUrl);
} else {
dispatch({ type: 'LOADING', loading: false })
message.error('封面图片获取失败');
}
},
error: () => {
dispatch({ type: 'LOADING', loading: false })
message.error('封面图片获取失败');
},
});
})
}
// base64转二进制传给接口
function getUintArray(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}