客户端实时图像遮罩

我想在客户端希望掩盖一个图像。我通过在透明的太阳穴上使用填充来创建一个形状。我想用这个形状作为面具。棘手的部分是我希望用户能够移动和旋转蒙版图像。所以我希望能找到一个能让我实现图像遮蔽的图书馆。有什么建议么？客户端实时图像遮罩

事情我已经尝试：

CCS - WebKit的面具网址

jQuery的本 - 巴内特帆布工具

2012-09-25 Bryan Williams

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

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

Fiddle。

来源

2012-09-25 18:37:46

我已经创建了一个插件来掩盖image.It使用户能够掩盖图像的多个部分。看看下面的链接。

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>

/*! 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

来源

2016-03-31 13:56:41 Nofi

客户端实时图像遮罩

回答

相关问题