需求:

  1. 放大一张 PNG图片

方法: 利用 canvas

<html>

<head>
  <title>如何放大png图片</title>
</head>
<body>


<canvas id="canvas" width="128px" height="128px">
</canvas>


<select id="iselect">
  <option value="128" >128</option>
  <option value="48" >48</option>
  <option value="16" >16</option>
</select>


<!-- <a id="download" href="JavaScript:void(0);">点击下载</a> -->
<script type="text/javascript">

let flay = function(){
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  var data = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" version="1.1">
<g id="surface1">
<path style=" fill:#FFC107;" d="M 22.976563 23 L 6 23 L 6 6 L 23 6 Z "></path>
<path style=" fill:#7CB342;" d="M 6 25 L 23 25 L 23 42 L 6 42 Z "></path>
<path style=" fill:#2196F3;" d="M 41.976563 23 L 25 23 L 25 6 L 42 6 Z "></path>
<path style=" fill:#1565C0;" d="M 25 25 L 42 25 L 42 42 L 25 42 Z "></path>
<path style=" fill:#FFF9C4;" d="M 17 11 C 17 12.105469 17.894531 13 18.996094 13 C 20.105469 13 21 12.105469 21 11 C 21 9.894531 20.105469 9 18.996094 9 C 17.894531 9 17 9.894531 17 11 "></path>
<path style=" fill:#D85700;" d="M 13 12 L 7 20 L 19 20 Z "></path>
<path style=" fill:#EF7E03;" d="M 18 15 L 13.875 20 L 22 20 Z "></path>
<path style=" fill:#FFFFFF;" d="M 12.488281 29.519531 C 12.488281 28.414063 13.386719 27.519531 14.5 27.519531 C 15.613281 27.519531 16.515625 28.414063 16.515625 29.519531 C 16.515625 30.625 14.5 33.519531 14.5 33.519531 C 14.5 33.519531 12.488281 30.625 12.488281 29.519531 "></path>
<path style=" fill:#FFFFFF;" d="M 16.515625 37.519531 C 16.515625 38.628906 15.613281 39.519531 14.5 39.519531 C 13.386719 39.519531 12.488281 38.628906 12.488281 37.519531 C 12.488281 36.414063 14.5 33.519531 14.5 33.519531 C 14.5 33.519531 16.515625 36.414063 16.515625 37.519531 "></path>
<path style=" fill:#FFFFFF;" d="M 10.007813 33.253906 C 9.046875 32.695313 8.714844 31.476563 9.269531 30.519531 C 9.824219 29.5625 11.058594 29.234375 12.019531 29.789063 C 12.984375 30.34375 14.5 33.519531 14.5 33.519531 C 14.5 33.519531 10.972656 33.804688 10.007813 33.253906 "></path>
<path style=" fill:#FFFFFF;" d="M 18.992188 33.785156 C 19.957031 34.339844 20.285156 35.5625 19.730469 36.515625 C 19.175781 37.476563 17.941406 37.804688 16.980469 37.25 C 16.015625 36.699219 14.5 33.519531 14.5 33.519531 C 14.5 33.519531 18.027344 33.234375 18.992188 33.785156 "></path>
<path style=" fill:#FFFFFF;" d="M 18.992188 33.253906 C 19.957031 32.695313 20.285156 31.476563 19.730469 30.519531 C 19.175781 29.5625 17.941406 29.234375 16.980469 29.789063 C 16.015625 30.339844 14.5 33.519531 14.5 33.519531 C 14.5 33.519531 18.027344 33.804688 18.992188 33.253906 "></path>
<path style=" fill:#FFFFFF;" d="M 10.007813 33.785156 C 9.046875 34.339844 8.714844 35.5625 9.269531 36.515625 C 9.824219 37.476563 11.058594 37.804688 12.019531 37.25 C 12.984375 36.695313 14.5 33.519531 14.5 33.519531 C 14.5 33.519531 10.972656 33.234375 10.007813 33.785156 "></path>
<path style=" fill:#FFC107;" d="M 16.5 33.597656 C 16.5 34.699219 15.605469 35.59375 14.5 35.59375 C 13.394531 35.59375 12.5 34.699219 12.5 33.597656 C 12.5 32.488281 13.394531 31.59375 14.5 31.59375 C 15.605469 31.59375 16.5 32.488281 16.5 33.597656 "></path>
<path style=" fill:#FFC107;" d="M 29 29 L 38 29 L 38 38 L 29 38 Z "></path>
<path style=" fill:#FFC107;" d="M 33.5 27.140625 L 39.863281 33.503906 L 33.5 39.867188 L 27.136719 33.503906 Z "></path>
<path style=" fill:#FFF8E1;" d="M 31 33.5 C 31 34.882813 32.121094 36 33.5 36 C 34.882813 36 36 34.882813 36 33.5 C 36 32.117188 34.882813 31 33.5 31 C 32.121094 31 31 32.117188 31 33.5 "></path>
<path style=" fill:#FFF59D;" d="M 27 10 C 27 11.105469 27.894531 12 29 12 C 30.105469 12 31 11.105469 31 10 C 31 8.894531 30.105469 8 29 8 C 27.894531 8 27 8.894531 27 10 "></path>
<path style=" fill:#E3F2FD;" d="M 39 15 C 39 16.65625 37.65625 18 36 18 C 34.34375 18 33 16.65625 33 15 C 33 13.34375 34.34375 12 36 12 C 37.65625 12 39 13.34375 39 15 Z "></path>
<path style=" fill:#E3F2FD;" d="M 34.5 16 C 34.5 17.378906 33.378906 18.5 32 18.5 C 30.621094 18.5 29.5 17.378906 29.5 16 C 29.5 14.621094 30.621094 13.5 32 13.5 C 33.378906 13.5 34.5 14.621094 34.5 16 Z "></path>
<path style=" fill:#E3F2FD;" d="M 34.398438 20 C 33.238281 20 36.738281 15.847656 37.898438 15.847656 C 39.058594 15.847656 40 16.777344 40 17.925781 C 40 19.070313 39.058594 20 37.898438 20 C 36.738281 20 35.800781 20 34.398438 20 Z "></path>
<path style=" fill:#E3F2FD;" d="M 26.964844 17.925781 C 26.964844 16.777344 27.90625 15.847656 29.066406 15.847656 C 32.566406 15.847656 33.726563 20 32.566406 20 C 31.164063 20 30.226563 20 29.066406 20 C 27.90625 20 26.964844 19.070313 26.964844 17.925781 Z "></path>
<path style=" fill:#E3F2FD;" d="M 37.398438 20 L 29 20 L 29 17.230469 L 37.398438 15.847656 Z "></path>
</g>
</svg>`;

  var DOMURL = window.URL || window.webkitURL || window;
  var img = new Image();
  var svg = new Blob([data], {type: 'image/svg+xml'});
  var url = DOMURL.createObjectURL(svg);

  img.onload = function () {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
    var png_img = canvas.toDataURL("image/png");
  }

  img.src = url;
  console.log(url);
}

// 下拉事件
var sel = document.getElementById('iselect');
sel.value = 128;
sel.addEventListener("change", function(sel){
  let val = this.options[this.options.selectedIndex].value;
  console.log(val);
  document.getElementById("canvas").width = val;
  document.getElementById("canvas").height = val;
  flay();
}, false);


 flay();
</script>
</body>
<html>

给个链接 svg