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

保存原始图像+对其应用了可拖动的模糊蒙版

1 个答案: