客戶端實時圖像遮罩

我想在客戶端希望掩蓋一個圖像。我通過在透明的太陽穴上使用填充來創建一個形狀。我想用這個形狀作爲面具。棘手的部分是我希望用戶能夠移動和旋轉蒙版圖像。所以我希望能找到一個能讓我實現圖像遮蔽的圖書館。有什麼建議麼？客戶端實時圖像遮罩

事情我已經嘗試：

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

客戶端實時圖像遮罩

回答

相關問題