|
|
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>探途足迹</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"> <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> <!-- <script src="js/saveSvgAsPng.js?vs=1.1.11" type="text/javascript" charset="utf-8"></script> --></head> <body> <div id="svg_wrap"> <svg version="1.1" xmlns="http://www.we.org/1999/xlinks" xmlns="http://www.w3.org/2000/svg" id="jsmap-container-svg" style="position:relative;overflow:hidden;" width="355" height="400" viewBox="0 0 575 470"><path d="M464.838,96.639l6.787-1.19l2.854,5.241l4.285,3.095l2.856-1.188h2.386l4.285-2.501l3.094,3.094l2.024,0.357l5.357-2.023l3.813,2.023l1.666,4.288h2.857l1.43,1.904l3.689,4.049l1.426-0.833l-0.594-5.12l2.026-1.432l2.854,5.716l2.621,1.074l2.858,3.212l2.021-0.357l0.836-1.427l4.523-5.12l2.022,1.428l1.43-2.022l1.431,2.619l4.283,1.429h2.86l2.07,0.088l-1.238-2.113l-0.598-6.906l-5.115-7.978l2.855-2.857l2.616-4.883h9.646l1.785-1.665l-0.597-3.69l2.025-3.691l-0.596-2.024l0.832-3.451l-0.236-17.742l2.855-5.715l-3.214-3.692l0.595-2.261l-1.427-2.024l-3.69,1.429l-4.289,4.884l-4.283,2.023l-4.289,5.951l-10.598,3.692l-4.879-3.692l0.594-2.262l-2.5-3.689l-1.191-3.811l-4.047-0.239l-7.145-3.69l-2.859,1.071l-3.33-1.667l-4.887,0.834l-4.283-1.429l-2.621-3.69l-2.498-2.857l-0.951-2.857l-3.334-3.452l-2.026-3.099l-4.644-6.31l-1.428-3.69l-5.119-6.548l-1.432-3.454l-6.549-3.216l-4.287,1.429l-3.689-0.833l-8.336-1.668l-11.07,3.932l-2.024,1.786l2.262,3.096l-2.856,7.499l0.834,0.835l4.881,3.096l2.621-4.286l4.524,2.856l-0.235,2.022l1.664,5.119l2.854,3.218l5.717,0.833l1.668-1.787l3.451-0.477l6.547-5.476l8.576,6.31l-2.858,11.669l0.594,8.333v5.119l-2.26,1.191l-0.238,13.335l-0.597-0.476l-2.26-2.858h-1.192l-0.595,1.073c0,0-8.797,13.044-7.146,10.596c1.652-2.448-3.451,4.523-3.451,4.523l0.357,1.428l7.145,4.886l3.926-1.071l0.599,1.071l-0.834,1.189l-3.689,1.667l-0.359,3.214L464.838,96.639z" class="jsmap-heilongjiang" data-name="heilongjiang" data-id="heilongjiang" style="cursor:pointer;" fill="#3f99f9" data-fill="#3f99f9" stroke="#fff" stroke-width="1"><text x="0" y="0" style="fill: rgb(255, 255, 255); font-size: 0.24rem;">eeeee</text></path><path d="M544.896,113.042l-2.07-0.088h-2.858l-4.285-1.431l-1.43-2.619l-1.431,2.024l-2.022-1.428l-4.523,5.12l-0.834,1.427l-2.022,0.357l-2.859-3.214l-2.621-1.072l-2.854-5.715l-2.027,1.431l0.594,5.12l-1.426,0.833l-3.689-4.05l-1.432-1.903h-2.854l-1.666-4.288l-3.813-2.023l-5.354,2.023l-2.025-0.357l-3.098-3.094l-4.285,2.5h-2.383l-2.857,1.191l-4.285-3.096l-2.854-5.24l-6.787,1.189l-2.621,3.099l-0.238,3.45l-7.502-2.023l-1.074,2.381l0.601,1.667l3.928,2.859v4.046l0.594,3.929l2.265,3.456l0.356,3.095l1.666,1.191l5.717-5.479l5.953,7.502v4.288l3.213,1.667l0.238-1.431l4.885,1.431l3.451,4.046l1.666-1.784l0.357-1.074l8.217,11.075l0.594,4.286l4.527,5.239l0.592,4.761l4.051-2.499l3.689-10.598l1.67-0.595l4.047,2.263l6.549-0.834l2.26-2.024l-3.092-4.763l0.832-1.191c0,0,7.84-2.611,6.072-2.022c-1.766,0.588,2.5-4.883,2.5-4.883l3.215-1.428l0.238-4.766l0.832-3.212l1.785-0.596l1.668,1.789l1.668,1.426l4.287-5.715l1.188-4.288L544.896,113.042z" class="jsmap-jilin" data-name="jilin" data-id="jilin" style="cursor:pointer;" fill="#3f99f9" data-fill="#3f99f9" stroke="#fff" stroke-width="1"><text x="0" y="0" style="fill: rgb(255, 255, 255); font-size: 0.24rem;">eeeee</text></path><path d="M491.15,173.2l6.783-10.002l4.287-4.881l-0.595-4.763l-4.524-5.239l-0.594-4.286l-8.216-11.075l-0.358,1.074l-1.666,1.786l-3.453-4.05l-4.883-1.429l-0.236,1.429v2.264l-2.022,2.022l-4.047,4.05H467.1l-1.666,2.856h-1.789l-3.094,3.096h-1.787l-3.691,3.691l-2.262,0.596l-4.881,7.5l-3.096-4.644l-3.453-2.262l-1.666,1.667l1.903,10.002l-1.666,3.453l-1.668,5.12l4.763,3.215l2.621,0.238l3.45,4.881l2.5-1.429c0,0,2.857-2.881,4.05-4.882c1.192-2.002,4.049-6.788,4.049-6.788l6.787-1.429l4.287,4.286l-3.099,6.787l-4.049,6.311l3.688,2.62l-0.233,3.098l-2.857,2.855l0.597,1.19l4.881-2.619l7.143-9.407l10.836-6.072L491.15,173.2z" class="jsmap-liaoning" data-name="liaoning" data-id="liaoning" style="cursor:pointer;" fill="#FFD363" data-fill="#3f99f9" stroke="#fff" stroke-width="1"><text x="0" y="0" style="fill: rgb(255, 255, 255); font-size: 0.24rem;">eeeee</text></path><path d="M301.969,226.604l3.438-0.779l2.859-1.188l4.762-3.932l0.953-6.31l2.855-9.168l5.954-4.048l0.835,0.951l1.786,6.19l-2.858,4.049l-0.594,3.691l9.168,3.453l0.832,2.621l5.358-0.359l2.617,0.596l1.191,0.834l9.405-13.454l2.502-0.835l0.593-1. <!-- <svg width="200" height="200" xmlns='http://www.w3.org/2000/svg'>
<rect width="200" height="200" style="fill:#ddd"></rect> </svg> --> </div> <canvas id="canvas"></canvas> <img src="" class="svgImg" /> <script> $(function() { //获取svg内容 var svg = document.getElementById('svg_wrap').innerHTML; var canvas = document.getElementById('canvas'); var c = canvas.getContext('2d'); //新建Image对象 //var img = new Image(); //svg内容 //img.src = 'data:image/svg+xml,' + unescape(encodeURIComponent(svg));//svg内容中可以有中文字符 //img.src = 'data:image/svg+xml,' + svg;//svg内容中不能有中文字符 //svg编码成base64 //img.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg)));//svg内容中可以有中文字符 //img.src = 'data:image/svg+xml;base64,' + window.btoa(svg);//svg内容中不能有中文字符 // let chart = document.getElementById('svg_wrap'); // let svghtml = chart.innerHTML; // let imgsrc = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svghtml)))}`; let chart = document.querySelector('svg'); //let svghtml = chart.outerHTML; let svghtml = new XMLSerializer().serializeToString(chart); let imgsrc = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svghtml)))}`; $('.svgImg').attr('src',imgsrc) //图片初始化完成后调用 /* img.onload = function() { //将canvas的宽高设置为图像的宽高 canvas.width = img.width; canvas.height = img.height; //canvas画图片 c.drawImage(img, 0, 0); //将图片添加到body中 document.body.appendChild(img) } */ /* svgAsDataUri(document.getElementById("svg_wrap"), 1, function(uri) { console(uri) }); */ /** * 将svg导出成图片 * @param node svg节点 => document.querySelector('svg') * @param name 生成的图片名称 * @param width 生成的图片宽度 * @param height 生成的图片高度 * @param type 生成的图片类型 */ function covertSVG2Image (node, name, width, height, type) { let serializer = new XMLSerializer() let source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(node) let image = new Image() image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source) let canvas = document.createElement('canvas') canvas.width = width canvas.height = height let context = canvas.getContext('2d') context.fillStyle = '#fff' context.fillRect(0, 0, 10000, 10000) image.onload = function () { context.drawImage(image, 0, 0) let a = document.createElement('a') a.download = `${name}.${type}` a.href = canvas.toDataURL(`image/${type}`) a.click() } } //covertSVG2Image(document.getElementById('svg_wrap'),'123',355,400,'png') }) /* window.onload = function(){ //获取svg内容 var svg = document.getElementById('svg_wrap').innerHTML; var canvas = document.getElementById('canvas'); var c = canvas.getContext('2d'); //新建Image对象 var img = new Image(); //svg内容 img.src = 'data:image/svg+xml,' + unescape(encodeURIComponent(svg));//svg内容中可以有中文字符 img.src = 'data:image/svg+xml,' + svg;//svg内容中不能有中文字符 //svg编码成base64 img.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg)));//svg内容中可以有中文字符 img.src = 'data:image/svg+xml;base64,' + window.btoa(svg);//svg内容中不能有中文字符 //图片初始化完成后调用 img.onload = function() { //将canvas的宽高设置为图像的宽高 canvas.width = img.width; canvas.height = img.height; //canvas画图片 c.drawImage(img, 0, 0); //将图片添加到body中 document.body.appendChild(img) } } */ </script></body> </html>
|
