dsebao · September 26, 2018 03:28
diff --git a/index.html b/index.html
 <link rel="stylesheet" href="screen.css" media="screen">

 <style media="screen">
 body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
    text-align: center;
 }

 #container {
    display: inline-block;
    padding: 2em;
    border: 0.062em solid #999;
    border-radius: 1em;
    background-color: #fff;
    box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 ), 
            0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
 }

 h1,h2 {
    font-size: 1em;
 }

 svg, canvas {
    display:block;
    margin: 1em 0;
 }

 .hide {
    display: none;
 }
 </style>

 </head>
 <body> 

 <div id="container">

 <h1>this is the svg image</h1>

  <svg width="170" height="112">

  
      <clippath id="circleView">
        <circle cx="50%" cy="50%" r="85" transform="translate(90 90)" fill="orange"></circle>
      </clippath>

    <image  x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>

  </svg>

 <button>svg to png</button>

 <h2 class="hide">this is the png image</h2>

 <canvas width="170" height="112"></canvas>

 </div>

 <script>
 (function(w,d) {
   'use strict';

   var btn = d.querySelector( 'button' );
   var svg = d.querySelector( 'svg' );
   var canvas = d.querySelector( 'canvas' );

   var imageName ='your-image-name';

 function triggerDownload ( imgURI ) {
   var evt = new MouseEvent( 'click', {
       view: w,
       bubbles: false,
       cancelable: true
    });

   var a = d.createElement( 'a' );
       a.setAttribute( 'download', imageName + '.png' );
       a.setAttribute( 'href', imgURI );
       a.setAttribute( 'target', 'blank' );
       a.dispatchEvent(evt);
    }

   btn.addEventListener( 'click', function () {

   var ctx = canvas.getContext( '2d' );
   var data = ( new XMLSerializer() ).serializeToString( svg );
   var DOMURL = w.URL || w.webkitURL || w;

   var img = new Image();
   var svgBlob = new Blob( [data], { type: 'image/svg+xml;charset=utf-8' } );
   var url = DOMURL.createObjectURL( svgBlob );

   img.onload = function () {
       ctx.drawImage( img, 0, 0 );
       DOMURL.revokeObjectURL( url );

    var imgURI = canvas
        .toDataURL( 'image/png' )
        .replace( 'image/png', 'image/octet-stream' );

    triggerDownload( imgURI );
  };
    img.src = url;
    d.querySelector( 'h2' ).classList.remove( 'hide' );
 });
 }(window, document));
 </script>
	<link rel="stylesheet" href="screen.css" media="screen">

	<style media="screen">
	body {
	background-color: #f0f0f0;
	font: 1em/150% verdana, arial, helvetica, sans-serif;
	text-align: center;
	}

	#container {
	display: inline-block;
	padding: 2em;
	border: 0.062em solid #999;
	border-radius: 1em;
	background-color: #fff;
	box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 ),
	0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
	}

	h1,h2 {
	font-size: 1em;
	}

	svg, canvas {
	display:block;
	margin: 1em 0;
	}

	.hide {
	display: none;
	}
	</style>

	</head>
	<body>

	<div id="container">

	<h1>this is the svg image</h1>

	<svg width="170" height="112">


	<clippath id="circleView">
	<circle cx="50%" cy="50%" r="85" transform="translate(90 90)" fill="orange"></circle>
	</clippath>

	<image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>

	</svg>

	<button>svg to png</button>

	<h2 class="hide">this is the png image</h2>

	<canvas width="170" height="112"></canvas>

	</div>

	<script>
	(function(w,d) {
	'use strict';

	var btn = d.querySelector( 'button' );
	var svg = d.querySelector( 'svg' );
	var canvas = d.querySelector( 'canvas' );

	var imageName ='your-image-name';

	function triggerDownload ( imgURI ) {
	var evt = new MouseEvent( 'click', {
	view: w,
	bubbles: false,
	cancelable: true
	});

	var a = d.createElement( 'a' );
	a.setAttribute( 'download', imageName + '.png' );
	a.setAttribute( 'href', imgURI );
	a.setAttribute( 'target', 'blank' );
	a.dispatchEvent(evt);
	}

	btn.addEventListener( 'click', function () {

	var ctx = canvas.getContext( '2d' );
	var data = ( new XMLSerializer() ).serializeToString( svg );
	var DOMURL = w.URL \|\| w.webkitURL \|\| w;

	var img = new Image();
	var svgBlob = new Blob( [data], { type: 'image/svg+xml;charset=utf-8' } );
	var url = DOMURL.createObjectURL( svgBlob );

	img.onload = function () {
	ctx.drawImage( img, 0, 0 );
	DOMURL.revokeObjectURL( url );

	var imgURI = canvas
	.toDataURL( 'image/png' )
	.replace( 'image/png', 'image/octet-stream' );

	triggerDownload( imgURI );
	};
	img.src = url;
	d.querySelector( 'h2' ).classList.remove( 'hide' );
	});
	}(window, document));
	</script>