0

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

我尝试过的事情：

CCS - webkit-mask-url

jQuery - Ben Barnett 画布实用工具

4

2 回答 2

2

这里有一篇关于使用 jQuery 进行图像屏蔽的文章（小提琴）。如果你想旋转图片，你可以添加一些 css 到它。例如：

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

小提琴。

于 2012-09-25T18:37:46.033 回答
1

我创建了一个插件来屏蔽图像。它使用户能够屏蔽图像的多个部分。看看下面的链接。

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;
 }

关联

于 2016-03-31T13:56:41.293 回答