html5, js und css3 Bild crop tool

Ich möchte ein Freistellungswerkzeug für Bilder mit HTML5, CSS3 und Javascript (jQuery) machen. Ich habe Probleme bei der Erstellung der folgenden: Hinzufügen eines grauen, Alpha = 0,5 Overlay div/span/was auch immer über das Bild Ich möchte mit einem Loch div/span/was auch immer in der Mitte, die die wahren Farben des Bildes zeigt zuschneiden. Ich möchte in der Lage sein, dieses Loch innerhalb der grauen Maske zu verschieben, damit Ereignis-Listener auf dieses Loch gesetzt werden. Ist das mit html5 und css3 machbar? Der js-Code ist mir egal, den ich alleine machen werde.html5, js und css3 Bild crop tool

Vielen Dank

Quelle

2016-10-19 user1840302

Zeigen Sie uns, was Sie bisher versucht. Außerdem ist diese Website kein Code-für-mich-Service. –

Dies ist mit der Leinwand möglich. – Enijar

Eine Idee, wie man das schafft, ist, nur ein div (das Loch) zu haben und seine Grenzen dynamisch zu ändern, um das Bild anzupassen. Die Rahmenfarbe ist die graue 0.5 Alpha-Farbe Edit: @PeterB. Ich habe noch nichts Wertvolles gezeigt. und ich habe keinen Code angefordert, nur ideeas darüber, wie das ausgeführt werden kann – user1840302

einen Blick auf dieses Beispiel nehmen:

Dann müssen Sie nur noch die .hole Position mit jquery Ereignis (Drag) oder was auch immer bewegen.

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.hole { 
 
    position: absolute; 
 
    left: 20px; 
 
    top: 10px; 
 
    width: 100px; 
 
    height: 100px; 
 
    box-shadow: 0 0 0 99999px rgba(0, 0, 0, .8); 
 
    border-radius: 3rem; 
 
}

<img src="http://upload.wikimedia.org/wikipedia/commons/5/51/Fox_Head.jpg" alt="" style="width: 30%;"> 
 
    <div class="hole"></div>

Quelle

2016-10-19 10:07:36

wie über dieses:

Wrapper mit position: relative und overflow: hidden
Bild
absolut positionierter Rechteck mit sehr großen Box-Schatten und Hintergrund transparent

$(function() { 
 
    $(".mask").draggable(); 
 
    });

body{padding:4px;} 
 
.wrap{width:300px;margin:auto;position:relative;overflow:hidden} 
 

 
.wrap img{width:100%;display:block} 
 
.mask{ 
 
    outline:1px solid white; 
 
    cursor:move; 
 
    position:absolute; 
 
    top:20px; 
 
    left:100px; 
 
    width:80px; 
 
    height:80px; 
 
    box-shadow:0 0 0 900000px rgba(0,0,0,0.75) 
 
}

<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.12.0/jquery-ui.min.js"></script> 
 

 
<div class="wrap"> 
 
    <div class="mask"></div> 
 
    <img src="https://www.fillmurray.com/460/300"> 
 
</div>

Quelle

2016-10-19 10:35:22

;-(Jordi Flores war schneller –

html5, js und css3 Bild crop tool

Antwort

Verwandte Themen