图片导出不完整

[stephenliu1944]

页面绘制的图形超出了canvas画布大小, 导致导出为图片时只有画布区域的图形, 请问如何导出完整的图形图片呢(包括超出canvas画布的部分)?

[Ovilia]

设置 canvas 为更大的尺寸，必要时可能需要移动元素使得在画布内（比如可以创建一个 group 放所有元素，然后对 group 调整位置），然后调用 refreshImmediately() 刷新，再导出图片

[stephenliu1944]

谢谢, 最近也在朝这个思路考虑, zrender有没有可以获取到绘制的真实尺寸的方法, 包括超出canvas的部分? 这样可以知道canvas应该扩大多少, 位移应该移动多少.

[Ovilia]

可以把所有东西加到一个 group 里，然后通过 group 的 getBoundingRect 获得包围盒。没有实际用过，如果有问题欢迎交流。

[stephenliu1944]

好的, 我试试, 非常感谢

[zengleyi]

我也遇到这个问题，绘制所有矢量图形放在一个总group中，搭配roamable.js实现自由拖动和放大缩小很完美。但就是存图片解决不了，如果总group在canvas的视图中，导出的图片像素太小。如果将总group放大超出了canvas的试图，导出的图片又只有部分。不知道你解决没有 @Ovilia @stephenliu1944

[zengleyi]

放大缩小总group的getBoundingRect()并不变化

[stephenliu1944]

解决了, 有2种方法, 直接贴代码

1. 第一种直接在原zr上设置, 会影响原图状态, 并且生成的图片会模糊一点, 主要是resize的问题. 如果画质要求不高可以用这种.

        var { x, y, width, height } = group.getBoundingRect();               
        zr.resize({
            width,
            height
        });
        group.attr('position', [0 - x, 0 - y]);
        zr.refreshImmediately();
        zr.painter.getRenderedCanvas({
            backgroundColor
        }).toBlob((blob) => {
            var url = window.URL.createObjectURL(blob);
            window.open(url);
        }, 'image/png');

2. 第二种创建一个离屏zrender, 绘制出来不会影响原图状态

        var { x, y, width, height } = this.group.getBoundingRect();
        var zr = zrender.init(document.createElement('div'), {
            width,
            height
        });        

        var group = new zrender.Group();
        group.position = [0 - x, 0 - y];

        this.group.eachChild((child) => {
            // 此处会堆栈溢出, 目前解决办法是用原始数据重新创建新的shape, 再加入到新group中
            var _child = zrender.util.clone(child);
            group.add(_child);
        });

        zr.add(group);
        zr.refreshImmediately();

        return zr.painter.getRenderedCanvas({
            backgroundColor
        }).toBlob((blob) => {
            var url = window.URL.createObjectURL(blob);
            window.open(url);
        }, 'image/png');

[changyoutianxia]

zrArray = new Array(); zrArray 有三个zr 回调的时候blob存在空值是什么鬼； for(var i =0 ; i <zrArray.length;i++){ var zr = zrArray[i]; zr.painter.getRenderedCanvas({ backgroundColor:"#fff" }).toBlob((blob) => { //回调的时候存在blob=null //这个是什么情况。 var url = window.URL.createObjectURL(blob); }, 'image/png') };

[nanfb]

可以把所有东西加到一个 group 里，然后通过 group 的 getBoundingRect 获得包围盒。没有实际用过，如果有问题欢迎交流。

把所有图像放到group中，调用方法后发现获取到的xy是NaN,宽高都是很小的值