<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="exportImageButton">export</button> <svg> <rect width="200" height="200" fill="red" /> </svg>
<canvas width="200px" height="200px" />
$(".exportImageButton").on("click", function() { var svg = document.querySelector("svg"); var rect = document.querySelector("rect") rect.setAttribute("fill", "green") var svgData = new XMLSerializer().serializeToString(svg); var canvas = document.createElement("canvas"); var svgSize = svg.getBoundingClientRect(); canvas.width = svgSize.width * 3; canvas.height = svgSize.height * 3; canvas.style.width = svgSize.width; canvas.style.height = svgSize.height; var ctx = canvas.getContext("2d"); ctx.scale(3, 3); var img = document.createElement("img"); img.setAttribute("src", "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData)))); rect.setAttribute("fill", "red") img.onload = function() { ctx.drawImage(img, 0, 0); var canvasdata = canvas.toDataURL("image/png", 1); var pngimg = '<img src="' + canvasdata + '">'; d3.select("#pngdataurl").html(pngimg); var a = document.createElement("a"); a.download = "download_img" + ".png"; a.href = canvasdata; document.body.appendChild(a); a.click(); }; })
SVG 转 图片
最新推荐文章于 2024-06-25 14:37:48 发布