在IE中的angular5中一起捕获3d对象和svg的图像

时间:2018-12-27 11:29:18

标签: javascript angular typescript d3.js svg

如何捕获3D对象,沉重的Catia模型和在3D对象顶部创建的svg元素的图像?

我尝试了以下操作:

  1. 我试图捕获svg元素的图像。 (使用canvg成功)
  2. 我试图捕获ActiveX对象创建的3D对象的图像。 (从第三方获取图片)。

现在,我在获取两者的合并图像时面临问题。现在,我正在寻找可以帮助我将两个图像的最终图像转换为单个图像或仅生成包含d3.js一起创建的3D对象和svg元素的图像的东西。

  1. svg元素图片

        let targetElem = <any>document.getElementById('body');
        let svgElem = targetElem.querySelector('svg#svg-annotations')
        svgElem.setAttribute('height', '200%');
        svgElem.setAttribute('width', '200%');
    
        let parentNode = svgElem.parentNode;
        let svg = parentNode.innerHTML.trim(); // parentnode is required as we have an ope issue in IE, innerhtml of svg element is not avialable
        this.canvas = document.createElement('canvas');
        this.canvas.setAttribute('id', '_canvas' + this.counter);
    
        canvg(this.canvas, svg);
        // parentNode.appendChild(this.canvas);
        let data = this.canvas.toDataURL('image/png', 0.5);
        let blobData = this.base64toBlob(data.split(',')[1], 'image/png');
        saveAs(blobData, 'myblob.png');
        this.counter++;
        callback(blobData);
    

从第三方获取3D重型Catia对象模型的图像。我尝试过

https://www.npmjs.com/package/merge-images

但我仍然远离成功。

我想要一张在模型顶部同时包含3d catia对象和svg元素的最终图像。

  1. 我可以合并这两种图像(base64或blob形式),因为无法通过jvascript读取本地目录中的文件。

  2. 在一个步骤中同时包含3D对象图像和svg的图像,从而消除了合并问题。

任何帮助将不胜感激。

0 个答案:

没有答案