TWaver Forums
http://twaver.servasoft.com/forum/

twaver 导出的时候 ,使用 toCanvas 获取的canvas 对象执行 toDataURL 方法 报错
http://twaver.servasoft.com/forum/viewtopic.php?f=35&t=6144
Page 1 of 1

Author:  phantom [ 2019-04-17 18:05 ]
Post subject:  twaver 导出的时候 ,使用 toCanvas 获取的canvas 对象执行 toDataURL 方法 报错

twaver 导出的时候 ,使用 toCanvas 获取的canvas 对象执行 toDataURL 方法 报错

代码如下 :
var self = this;
//判断是否有数据
if(self.box._dataList._as.length == 0){
ngc.info(i18n.EXPORT_NO_CONTENT_NOTICE);
return;
}
var bgFlag = false;
if(!self.network._box._styleMap["background.vector.fill.color"]){
this.setBackgroundColor("#fff");
bgFlag = true;
}
var canvas = self.network.toCanvas(self.network.getUnionBounds().width, self.network.getUnionBounds().height, null, self.network.getZoom(), self.network.getUnionBounds().x, self.network.getUnionBounds().y);
var url = canvas.toDataURL();
var _download = $("<a id='downloadPic'></a>");
$("body").append(_download);’

可以换取到 canvas 对象 ,执行下面的canvas.toDataURL(); 转成字符串的时候, 报
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exporte
错误
topo 图可以正常展示的

Author:  liushun [ 2019-04-23 10:30 ]
Post subject:  Re: twaver 导出的时候 ,使用 toCanvas 获取的canvas 对象执行 toDataURL 方法 报错

你好,经过测试,出现这个错误的原因是由于图片资源跨域问题造成的,你应该是在创建网元的图片中使用了不是本地服务器的资源图片,在调用toDataURL 时就会包该错误。

Author:  phantom [ 2019-04-23 16:03 ]
Post subject:  Re: twaver 导出的时候 ,使用 toCanvas 获取的canvas 对象执行 toDataURL 方法 报错

liushun wrote:
你好,经过测试,出现这个错误的原因是由于图片资源跨域问题造成的,你应该是在创建网元的图片中使用了不是本地服务器的资源图片,在调用toDataURL 时就会包该错误。


您好,多谢回复, 我的topo t图只有一张图片 ,是当前服务内的, 没有跨域的, 就一个icon 是矢量图代码生成的, 这个图形在其他topo都可以正常导出。 就这个不行,回报这个 ,有可能是其他原因吗??

Author:  liushun [ 2019-04-25 10:20 ]
Post subject:  Re: twaver 导出的时候 ,使用 toCanvas 获取的canvas 对象执行 toDataURL 方法 报错

你好。我也用代码绘制矢量图的方式进行了网元图片的创建。
矢量图代码为
Code:
twaver.Util.registerImage("topoNode", {
        w: 80,
        h: 40,
        font: "20px arial",
        lineColor: "#00E0D6",
        v: [{
                shape: "rect",
                // "rect": [-40, -20, 80, 40, 5]
                x: -40,
                y: -20,
                w: 80,
                h: 40,
                r: 5,
                lineWidth: 4
                // "lineColor": "#00E0D6",
            },
            {
                shape: "rect",
                rect: [-33, -15, 6, 30],
                lineWidth: 1
                // "lineColor": "#00E0D6"
            },
            {
                shape: "rect",
                rect: [-22, -15, 6, 30],
                lineWidth: 1
                // "lineColor": "#00E0D6"
            },
            {
                shape: "rect",
                rect: [-10, -15, 6, 30],
                lineWidth: 1
                // "lineColor": "#00E0D6"
            },
            {
                shape: "rect",
                rect: [3, -15, 6, 30],
                lineWidth: 1
                // "lineColor": "#00E0D6"
            },
            {
                shape: "rect",
                rect: [3, -15, 6, 30],
                lineWidth: 1
                // "lineColor": "#00E0D6"
            },
            {
                shape: "rect",
                rect: [15, -15, 15, 6],
                lineWidth: 1
                // "lineColor": "#00E0D6"
            },
            {
                shape: "rect",
                rect: [15, -5, 15, 6],
                lineWidth: 1
                // "lineColor": "#00E0D6"
            },
            {
                shape: "rect",
                rect: [15, 5, 15, 10],
                lineWidth: 1
                // "lineColor": "#00E0D6"
            }
        ]
    });

可自己写这矢量图代码,或者用公司提供的矢量图转换工具(将矢量图直接转代码)
Attachment:
1.png
1.png [ 35.5 KiB | Viewed 589 times ]

demo 如下
Attachment:
1.7z [991 Bytes]
Downloaded 80 times

Page 1 of 1 All times are UTC + 8 hours
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/