Question

我希望能够在客户端屏蔽所有图像。我在透明的模板上使用填充物创建了一个形状。我想用这个形状作为面具。棘手的部分是我希望用户能够移动和旋转被屏蔽的图像。所以我希望找到一个允许我进行图像掩蔽的库。有什么建议吗？

我尝试过的事情：

CCS - webkit-mask-url

jQuery - Ben Barnett Canvas Utility

Answer 1

有一篇关于使用jQuery here（fiddle）进行图像屏蔽的文章。如果你想旋转图片，你可以添加一些CSS。例如：

.rotated_image{
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Fiddle

Answer 2

我创建了一个掩盖图像的插件。它允许用户屏蔽图像的多个部分。请看下面的链接。

<强> HTML

<body>
  <div id="photoContainer"><img id="image" src="http://www.cpplcounseling.com/uploads/4/6/8/2/46828361/2181364_orig.jpg" / title="Double click to mask" width="100%"></div>

  <br>
  <button id="mask">Mask</button>
  <button id="undoMask">Undo Mask</button>
  <button id="unMask">UnMask</button>
  <button id="save">Save</button>
  <button id="getSaved">Get Saved</button>
  <br>
  <br>
  <i>Note : Double click on particular portion of the image to mask that spot</i>
</body>

<强> JS

/*! Developed by Nofiden Noble
 * To apply multiple masking on a image
 **/

$(document).ready(function() {
  var maskStyles = [];
  $("#image").click(function() {
    $(".imageMask").draggable({
      disabled: true
    }).resizable({
      disabled: true
    });
    $(".imageMask").addClass("blur");
  });
  $("#image").dblclick(function(e) {
    var x = e.offsetX;
    var y = e.offsetY;
    $(".imageMask").draggable({
      disabled: true
    }).resizable({
      disabled: true
    });
    $(".imageMask").addClass("blur");
    $("#photoContainer").append('<div  class="imageMask ui-draggable ui-draggable-handle ui-resizable" style="left: ' + (x - 3) + 'px; top: ' + (y - 3) + 'px;"></div>');
    $("#photoContainer .imageMask:last-child").draggable({
      containment: 'parent'
    }).resizable({
      handles: 'all'
    });
  });
  $("#mask").click(function() {
    $(".imageMask").draggable({
      disabled: true
    }).resizable({
      disabled: true
    });
    $(".imageMask").addClass("blur");
    $("#photoContainer").append('<div  class="imageMask ui-draggable ui-draggable-handle ui-resizable" style="left: 65px; top: 55px;"></div>');
    $("#photoContainer .imageMask:last-child").draggable({
      containment: 'parent'
    }).resizable({
      handles: 'all'
    });
  });
  $("#undoMask").click(function() {
    if ($("#photoContainer .imageMask:last-child").hasClass("blur")) {
      $("#photoContainer .imageMask:last-child").removeClass("blur");
      $("#photoContainer .imageMask:last-child").draggable({
        disabled: false
      }).resizable({
        disabled: false,
        handles: 'all'
      });
    } else {
      $("#photoContainer .imageMask:last-child").remove();

    }
  });
  $("#unMask").click(function() {

    $("#photoContainer .imageMask").remove();
  });
  $("#save").click(function() {
    maskStyles = [];
    $("#photoContainer .imageMask").each(function(i, obj) {
      maskStyles.push(obj.getAttribute("style"));
    });
    console.log(maskStyles);
  });

  $("#getSaved").click(function() {
    for (maskStyle in maskStyles) {
      $("#photoContainer").append('<div  class="imageMask ui-draggable ui-draggable-handle ui-resizable blur" style="' + maskStyles[maskStyle] + '"></div>');
    }
    $("#photoContainer .imageMask").draggable({
      containment: 'parent',
      disabled: true
    }).resizable({
      disabled: true,
       handles: 'all'
    });
    $("#image").trigger('click');
  });
});

<强> CSS

 .imageMask {
   background-color: #131212;
   opacity: .75;
   position: absolute;
   left: 85px;
   top: 66px;
   width: 30px;
   height: 30px;
 }

 .imageMask:hover {
   cursor: move;
 }

 #photoContainer {}

 .blur {
   -webkit-filter: blur(3px);
   filter: blur(3px);
   opacity: 1;
   cursor: default!important;
 }

 * * jQuery UI Resizable @VERSION * * Copyright 2010,
 AUTHORS.txt (http: //jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses. * http: //jquery.org/license
 * * http: //docs.jquery.com/UI/Resizable#theming
 */ .ui-resizable {
   position: relative;
 }

 .ui-resizable-handle {
   position: absolute;
   font-size: 0.1px;
   z-index: 99999;
   display: block;
 }

 .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
   display: none;
 }

 .ui-resizable-n {
   cursor: n-resize;
   height: 7px;
   width: 100%;
   top: -5px;
   left: 0;
 }

 .ui-resizable-s {
   cursor: s-resize;
   height: 7px;
   width: 100%;
   bottom: -5px;
   left: 0;
 }

 .ui-resizable-e {
   cursor: e-resize;
   width: 7px;
   right: -5px;
   top: 0;
   height: 100%;
 }

 .ui-resizable-w {
   cursor: w-resize;
   width: 7px;
   left: -5px;
   top: 0;
   height: 100%;
 }

 .ui-resizable-se {
   cursor: se-resize;
   width: 12px;
   height: 12px;
   right: 1px;
   bottom: 1px;
 }

 .ui-resizable-sw {
   cursor: sw-resize;
   width: 9px;
   height: 9px;
   left: -5px;
   bottom: -5px;
 }

 .ui-resizable-nw {
   cursor: nw-resize;
   width: 9px;
   height: 9px;
   left: -5px;
   top: -5px;
 }

 .ui-resizable-ne {
   cursor: ne-resize;
   width: 9px;
   height: 9px;
   right: -5px;
   top: -5px;
 }

Link

客户端实时图像屏蔽

2 个答案: