解决html2canvas 无法截到Svg标签内容

最新推荐文章于 2023-08-30 15:13:42 发布

箱葙不想

最新推荐文章于 2023-08-30 15:13:42 发布

阅读量406

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/hhhhhac/article/details/131103831

版权

        if (typeof html2canvas !== 'undefined') {
            //以下是对svg的处理
            var nodesToRecover = [];
            var nodesToRemove = [];
            var svgElem = $("#pedecharts").find('svg');//divReport为需要截取成图片的dom的id
            svgElem.each(function (index, node) {
                var parentNode = node.parentNode;
                var svg = node.outerHTML.trim();

                var canvas = document.createElement('canvas');
                canvg(canvas, svg);//将svg赋值canvas
                if (node.style.position) {
                    canvas.style.position += node.style.position;
                    canvas.style.left += node.style.left;
                    canvas.style.top += node.style.top;
                }

                nodesToRecover.push({
                    parent: parentNode,
                    child: node
                });
                parentNode.removeChild(node);
                nodesToRemove.push({
                    parent: parentNode,
                    child: canvas
                });

                parentNode.appendChild(canvas);
            });

               html2canvas($("#pedecharts"), { //截图对象
                                //此处可配置详细参数
                  onrendered: function(canvas) { //渲染完成回调canvas
                  canvas.id = "mycanvas";
                  var dataUrl3 = canvas.toDataURL('image/png');  //指定格式，也可不带参数                     
                  formData.append("imgData3",convertBase64UrlToBlob(dataUrl3)); //写入数据
                  xhr.open("POST", "url"); //配置传输方式及地址
                                                                                                                    
                  xhr.send(formData);
           }
        });
      }