深浅模式
system.screenShot
typescript
/**
* 为某个元素进行截屏,返回图片的 base64 数据
* @param element 要截屏的元素
* @param onclone 克隆完成后的回调
*/
screenShot(element: Element, onclone: Function = null) {
return new Promise((resolve, reject) => {
window['html2canvas'](element, {
onclone: function (documentClone) {
if (typeof onclone === 'function') {
onclone(documentClone)
}
}
}).then((canvas) => {
// 打开新窗口
canvas.toBlob(function (blob) {
const url = URL.createObjectURL(blob);
const win = window.open(url, '_blank');
win.onload = function () {
URL.revokeObjectURL(url);
};
}, 'image/png');
resolve()
}).catch((e) => {
reject(e)
});
})
}
bpmn-js 截屏
javascript
/**
* 截屏
*/
screenShot() {
// 不用再调整缩放了,Clone内部会调整 g.transform 属性
const el = this.modeler.get("canvas")._container
// 必须带 Id 属性的元素才允许截图
const originId = el.id
system.screenShot(el, (doc) => {
const $body = $(doc.body).find('#' + originId)
$body.find('.djs-minimap').hide()
$body.find('.djs-palette').hide()
const svgElement = $body.find('svg[data-element-id]')[0]
const gElement = $(svgElement).find('g')[0]
gElement.style.transform = 'scale(1)'
gElement.style.transformOrigin = 'center'
const bbox = gElement.getBBox();
// console.log(bbox)
svgElement.setAttribute('viewBox', `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);
svgElement.style.width = `${bbox.width}px`;
svgElement.style.height = `${bbox.height}px`;
const $container = $body.find('.djs-container')
$container.css({
position: 'fixed',
left: 0,
top: 0,
zIndex: 999999,
width: `${bbox.width}px`,
height: `${bbox.height}px`
})
// console.log($container)
// debugger })
}