婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > html2 canvas svg不能識別的解決方案

html2 canvas svg不能識別的解決方案

熱門標簽:中國地圖標注城市的 通遼地圖標注app 地圖標注沿海城市房價 地圖標注員工作內容 威海語音外呼系統平臺 智能語音電銷機器人客戶端 江西ai電銷機器人如何 西安金倫外呼系統 高德地圖標注廁所

  最新有個功能需要截取網頁成圖片,于是用到比較流行的html2canvas,本來以為能順順利利的搞定,后來發現網頁上的流程圖連接線不在截圖中。于是各種百度、bing,也搜到好多,但是感覺沒有一個完整的代碼,現在自己解決了,分享下代碼。

  首先需要下載canvg.js,github地址:https://github.com/canvg/canvg

function showQRCode() {
                scrollTo(0, 0);
               
                if (typeof html2canvas !== 'undefined') {
                    //以下是對svg的處理
                    var nodesToRecover = [];
                    var nodesToRemove = [];
                    var svgElem = $("#divReport").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); 
                        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(document.querySelector("#divReport"), {
                        onrendered: function(canvas) {
                            var base64Str =canvas.toDataURL();//base64碼,可以轉圖片

                            //...

                            $('<img>',{src:base64Str}).appendTo($('body'));//直接在原網頁顯示
                         }                     });                }            }

到此這篇關于html2+canvas svg不能識別的解決方案的文章就介紹到這了,更多相關html2 canvas svg不能識別內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

標簽:河池 北海 崇左 營口 青海 阜陽 晉中 眉山

巨人網絡通訊聲明:本文標題《html2 canvas svg不能識別的解決方案》,本文關鍵詞  html2,canvas,svg,不,能識,別的,;如發現本文內容存在版權問題,煩請提供相關信息告之我們,我們將及時溝通與處理。本站內容系統采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《html2 canvas svg不能識別的解決方案》相關的同類信息!
  • 本頁收集關于html2 canvas svg不能識別的解決方案的相關信息資訊供網民參考!
  • 推薦文章
    主站蜘蛛池模板: 岳池县| 蚌埠市| 县级市| 手游| 灵石县| 桃园县| 永川市| 凤山县| 江安县| 肇州县| 邵东县| 宁波市| 化州市| 寿宁县| 宁波市| 阳曲县| 涞源县| 兴海县| 信宜市| 通山县| 咸宁市| 石景山区| 陇南市| 新化县| 天祝| 宽城| 荣昌县| 东方市| 闽侯县| 日照市| 贡嘎县| 莱阳市| 水富县| 英德市| 海兴县| 临城县| 洪江市| 甘孜县| 建始县| 阿拉善左旗| 武川县|