Skip to content

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    })  
}