JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<script src="https://cdn.bootcss.com/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<h2>Image with Background Blur Demo</h2>
<div id="my-node" class='img-blur-wrap'>
  cacetada amigo, funciona!!!!
  <div class='img-blur-bg'></div>
  <div class='img-blur'></div>
</div>
<button id="foo">download img</button>

CSS

.img-blur-wrap {
  position:relative;
  overflow:hidden;
}
.img-blur {
    background:url('https://i.imgur.com/2S7oKAT.png') center no-repeat;
    background-size:auto,400px;
    filter: none;
    z-index: 2;
    position: relative;
    max-width: 400px;
  	height:600px;
    margin: 0 auto;  
  	box-shadow:0px 20px 40px #000;
}
.img-blur-bg {
  background:linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3) ),  url('https://i.imgur.com/2S7oKAT.png') center no-repeat;
  background-size:auto,cover;
  filter: blur(5px);
  width:100%;
  height:600px;
  position: absolute;
  z-index: 1;
}

JavaScript

var node = document.getElementById('my-node');
var btn = document.getElementById('foo');
btn.onclick = function() {
  domtoimage.toBlob(document.getElementById('my-node'))
    .then(function(blob) {
      window.saveAs(blob, 'my-node.png');
    });
}