JSFiddle - React, Tailwind, and code Playground

SVG Icon Scaler to HTML print

by Andrew Pougher

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<input id="size-slider" type="range" min="16" max="200" step="1" value="16" class="red">
<h3 id="ttl">
SVG SCALE
</h3>
<span id="size-px">16px</span> <span>16px, 32px, 48px..</span>

<br>
<br>
<div id="artboard">


  <button class="icon-plus"></button>
  <button class="icon-chart"></button>
</div>
<div id="cunt">

</div>

CSS

html {
  padding: 50px;
  font: 14px sans-serif;
  color: #ccc;
}

#size-px {
  padding: 5px;
  border-radius: 4px;
  color: white;
  background: green;
  font-weight: bold;
}

button {
  width: 16px;
  height: 16px;
  border: 0;
  margin: 4px;
  background: url(http://www.brandoral.com/icons-svg/bo-icn-1.svg) no-repeat;
  background-size: contain;
  cursor: pointer;
}

button.icon-plus {
  background-position: 0 0;
}

button.icon-chart {
  background-position: 0 0;
}

button:hover {
  background-color: #ccc;
}

button:active {
  background-color: #666;
}

  canvas{position: absolute;top:0;left: 0;z-index: -1;display:block;height:100vh }

input {
  -webkit-appearance: none;
  width: 160px;
  height: 20px;
  margin: 10px 50px;
    background: linear-gradient(to right, #8d8d8d 0%, #636363 100%);
  background-size: 150px 10px;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  outline: none;
  zoom: 130%;
  display: block;
  margin: auto;
  margin-bottom: 30px;
}

input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #27ae60;
  position: relative;
  z-index: 3;
}

input::-webkit-slider-thumb:after {
  content: " ";
  width: 160px;
  height: 10px;
  position: absolute;
  z-index: 1;
  right: 20px;
  top: 5px;
  background: #2ecc71;
}

.red::-webkit-slider-thumb {
  background: #c0392b;
}

.red::-webkit-slider-thumb:after {
  background: #e74c3c;
}

JavaScript

$(function() {

  $("#size-slider").on('change', function(e) {
    var sizeValue = $(this).val();
  document.getElementById('ttl').style.fontSize=sizeValue+"px"; 
    var sizePx = sizeValue + "px";
    $("#size-px").html(sizePx);
    $("button").css({
      "width": sizePx,
      "height": sizePx
    });


    if (sizeValue % 16) {
      $("#size-px").css("background", "red");
    } else {
      $("#size-px").css("background", "green");
    }
    html2canvas(   $("#artboard")).then(function(canvas) {
       $('canvas').remove();
      //$('#cunt').append(canvas);
      $("#cunt").html(canvas);
  createPDF();
    });
        
  });


/*--*/

function createPDF(){
 getCanvas().then(function(canvas){
  var 
  img = canvas.toDataURL("image/png"),
  doc = new jsPDF({
          unit:'px', 
          format:'a6'
        });     
       // doc.addImage(img, 'JPEG', 0, 4000,true);
doc.addImage(img, 'JPEG', 0, 0,1000,1000,true,medium);//imageData, format, x, y, w, h, alias, compression
        doc.save('andrewTest.pdf');
    
         alert(doc)
 });

}
 
// create canvas object
function getCanvas(){
 return html2canvas( $('#artboard'),{
     imageTimeout:2000,
     removeContainer:true
    }); 
}

});





 	/* http://bit.ly/ARP71 */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-4809804-1', 'auto');
  ga('send', 'pageview');