jquery - convert svg to png using javascript after modification to svg - Stack Overflow

I have a svg that I am converting to png using below javascript code $(".exportImageButton").

I have a svg that I am converting to png using below javascript code

$(".exportImageButton").on("click",function(){
  var svg = document.querySelector( "svg" );
  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))) );

  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();
  };

However I want to alter svg element before I want it convert to png. Also I dont want to show that chnages on screen to the user.

I just would like to add opacity 1 to x axis labels and convert to png and let the svg on screen remain as it is with opacity 0 for x axis label.

How can i do that . Any help appreciated.

I have a svg that I am converting to png using below javascript code

$(".exportImageButton").on("click",function(){
  var svg = document.querySelector( "svg" );
  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))) );

  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();
  };

However I want to alter svg element before I want it convert to png. Also I dont want to show that chnages on screen to the user.

I just would like to add opacity 1 to x axis labels and convert to png and let the svg on screen remain as it is with opacity 0 for x axis label.

How can i do that . Any help appreciated.

Share Improve this question asked Jan 19, 2017 at 5:51 IshitaIshita 871 gold badge2 silver badges10 bronze badges 2
  • What's stopping you doing any of these things? Use the DOM to manipulate the document as you wish. – Robert Longson Commented Jan 19, 2017 at 6:41
  • Do you have markup to go along with JavaScript? – Brice Commented Jan 19, 2017 at 6:49
Add a ment  | 

1 Answer 1

Reset to default 5

As Robert suggested, just do it...

$(".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();
  };
})
<script src="https://cdnjs.cloudflare./ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis./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" />

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1742310215a4419739.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信