保存原始图像+应用于其的可拖动模糊遮罩

Question

我想知道是否有任何方法可以保存图像原件+在图像上拖动模糊遮罩

以下是图像上可拖动模糊遮罩的示例：https://codepen.io/netsi1964/pen/AXRabW

$(function() {
$("#mask").draggable({
containment: "parent"
});
});

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#mask {
width: 50px;
height: 50px;
border-radius: 100%;
overflow: hidden;
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
}
#unblurred {
position: absolute;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-filter: blur(0px);
}
#unblurred img {
position: fixed;
left: 0;
top: 0;
}
#blurred {
-webkit-filter: blur(20px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="mask">
<div id="unblurred">
<img src="https://i.ytimg.com/vi/LRVsxe5OJVY/maxresdefault.jpg">
</div>
</div>
<img id="blurred" src="https://i.ytimg.com/vi/LRVsxe5OJVY/maxresdefault.jpg">

想要在图像上使用可拖动模糊遮罩保存图像。。。也许使用画布或类型的东西

Answer 1

我认为我有一个什么工作的解决方案，这里是JS代码：

function saveMask() {
$("#blurred").hide()
html2canvas(document.querySelector("#mask"), {allowTaint: true}).then(h2c => {
var pos = $("#mask")[0].getBoundingClientRect();
$("#mask").hide()
var image = document.getElementById('blurred');
var canvas = document.createElement("canvas");
canvas.height = image.height;
canvas.width = image.width;
var ctx = canvas.getContext('2d')
ctx.filter = 'blur(20px)'
ctx.drawImage(image, 0, 0);
ctx.filter = 'none'
ctx.drawImage(h2c, pos.x, pos.y);
document.body.appendChild(canvas);
});
}

我的想法是使用html2canvas作为遮罩，然后我们创建一个带有模糊图像的画布，并将遮罩"粘贴"在上面。

我在这里有一个功能齐全的示例：
https://raw.githack.com/heldersepu/hs-scripts/master/HTML/html2canvas.html