以下是 html5拖拽图片调整截图代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>abc</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/component.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="content">
<div class="component">
<div class="overlay">
<div class="overlay-inner"></div>
</div>
<img class="resize-image" src="img/image.jpg" alt="image for resizing">
<button class="btn-crop js-crop">截图<img class="icon-crop" src="img/crop.svg"></button>
</div>
<div class="a-tip">
<p><strong>提示:</strong> 按住 <span>SHIFT</span> 调整保持原来的宽高比</p>
</div>
</div><!-- /content -->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/component.js"></script>
</body>
</html>
JS代码(component.js):
/*if(window.location.protocol == 'file:'){
alert('To test this demo properly please use a local server such as XAMPP or WAMP. See README.md for more details.');
}
*/
var resizeableImage = function(image_target){
// Some variable and settings var $container,orig_src = new Image(),image_target = $(image_target).get(0),event_state ={
}
,constrain = false,min_width = 60,// Change as required min_height = 60,max_width = 800,// Change as required max_height = 900,resize_canvas = document.createElement('canvas');
init = function(){
// When resizing,we will always use this copy of the original as the base orig_src.src=image_target.src;
// Wrap the image with the container and add resize handles $(image_target).wrap('<div class="resize-container"></div>') .before('<span class="resize-handle resize-handle-nw"></span>') .before('<span class="resize-handle resize-handle-ne"></span>') .after('<span class="resize-handle resize-handle-se"></span>') .after('<span class="resize-handle resize-handle-sw"></span>');
// Assign the container to a variable $container = $(image_target).parent('.resize-container');
// Add events $container.on('mousedown touchstart','.resize-handle',startResize);
$container.on('mousedown touchstart','img',startMoving);
$('.js-crop').on('click',crop);
}
;
startResize = function(e){
e.preventDefault();
e.stopPropagation();
saveEventState(e);
$(document).on('mousemove touchmove',resizing);
$(document).on('mouseup touchend',endResize);
}
;
endResize = function(e){
e.preventDefault();
$(document).off('mouseup touchend',endResize);
$(document).off('mousemove touchmove',resizing);
}
;
saveEventState = function(e){
// Save the initial event details and container state event_state.container_width = $container.width();
event_state.container_height = $container.height();
event_state.container_left = $container.offset().left;
event_state.container_top = $container.offset().top;
event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
event_state.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();
// This is a fix for mobile safari// For some reason it does not allow a direct copy of the touches propertyif(typeof e.originalEvent.touches !== 'undefined'){
event_state.touches = [];
$.each(e.originalEvent.touches,function(i,ob){
event_state.touches[i] ={
}
;
event_state.touches[i].clientX = 0+ob.clientX;
event_state.touches[i].clientY = 0+ob.clientY;
}
);
}
event_state.evnt = e;
}
;
resizing = function(e){
var mouse={
}
,width,height,left,top,offset=$container.offset();
mouse.x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
mouse.y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();
// Position image differently depending on the corner dragged and constraints if( $(event_state.evnt.target).hasClass('resize-handle-se') ){
width = mouse.x - event_state.container_left;
height = mouse.y - event_state.container_top;
left = event_state.container_left;
top = event_state.container_top;
}
else if($(event_state.evnt.target).hasClass('resize-handle-sw') ){
width = event_state.container_width - (mouse.x - event_state.container_left);
height = mouse.y - event_state.container_top;
left = mouse.x;
top = event_state.container_top;
}
else if($(event_state.evnt.target).hasClass('resize-handle-nw') ){
width = event_state.container_width - (mouse.x - event_state.container_left);
height = event_state.container_height - (mouse.y - event_state.container_top);
left = mouse.x;
top = mouse.y;
if(constrain || e.shiftKey){
top = mouse.y - ((width / orig_src.width * orig_src.height) - height);
}
}
else if($(event_state.evnt.target).hasClass('resize-handle-ne') ){
width = mouse.x - event_state.container_left;
height = event_state.container_height - (mouse.y - event_state.container_top);
left = event_state.container_left;
top = mouse.y;
if(constrain || e.shiftKey){
top = mouse.y - ((width / orig_src.width * orig_src.height) - height);
}
}
// Optionally maintain aspect ratio if(constrain || e.shiftKey){
height = width / orig_src.width * orig_src.height;
}
if(width > min_width && height > min_height && width < max_width && height < max_height){
// To improve performance you might limit how often resizeImage() is called resizeImage(width,height);
// Without this Firefox will not re-calculate the the image dimensions until drag end $container.offset({
'left':left,'top':top}
);
}
}
resizeImage = function(width,height){
resize_canvas.width = width;
resize_canvas.height = height;
resize_canvas.getContext('2d').drawImage(orig_src,0,0,width,height);
$(image_target).attr('src',resize_canvas.toDataURL("image/png"));
}
;
startMoving = function(e){
e.preventDefault();
e.stopPropagation();
saveEventState(e);
$(document).on('mousemove touchmove',moving);
$(document).on('mouseup touchend',endMoving);
}
;
endMoving = function(e){
e.preventDefault();
$(document).off('mouseup touchend',endMoving);
$(document).off('mousemove touchmove',moving);
}
;
moving = function(e){
var mouse={
}
,touches;
e.preventDefault();
e.stopPropagation();
touches = e.originalEvent.touches;
mouse.x = (e.clientX || e.pageX || touches[0].clientX) + $(window).scrollLeft();
mouse.y = (e.clientY || e.pageY || touches[0].clientY) + $(window).scrollTop();
$container.offset({
'left':mouse.x - ( event_state.mouse_x - event_state.container_left ),'top':mouse.y - ( event_state.mouse_y - event_state.container_top )}
);
// Watch for pinch zoom gesture while moving if(event_state.touches && event_state.touches.length > 1 && touches.length > 1){
var width = event_state.container_width,height = event_state.container_height;
var a = event_state.touches[0].clientX - event_state.touches[1].clientX;
a = a * a;
var b = event_state.touches[0].clientY - event_state.touches[1].clientY;
b = b * b;
var dist1 = Math.sqrt( a + b );
a = e.originalEvent.touches[0].clientX - touches[1].clientX;
a = a * a;
b = e.originalEvent.touches[0].clientY - touches[1].clientY;
b = b * b;
var dist2 = Math.sqrt( a + b );
var ratio = dist2 /dist1;
width = width * ratio;
height = height * ratio;
// To improve performance you might limit how often resizeImage() is called resizeImage(width,height);
}
}
;
crop = function(){
//Find the part of the image that is inside the crop box var crop_canvas,left = $('.overlay').offset().left - $container.offset().left,top = $('.overlay').offset().top - $container.offset().top,width = $('.overlay').width(),height = $('.overlay').height();
crop_canvas = document.createElement('canvas');
crop_canvas.width = width;
crop_canvas.height = height;
crop_canvas.getContext('2d').drawImage(image_target,left,top,width,height,0,0,width,height);
window.open(crop_canvas.toDataURL("image/png"));
}
init();
}
;
// Kick everything off with the target imageresizeableImage($('.resize-image'));
CSS代码(component.css):
.resize-container{position:relative;display:inline-block;cursor:move;margin:0 auto;}
.resize-container img{display:block}
.resize-container:hover img,.resize-container:active img{outline:2px dashed rgba(222,60,80,.9);}
.resize-handle-ne,.resize-handle-se,.resize-handle-nw,.resize-handle-sw{position:absolute;display:block;width:10px;height:10px;background:rgba(222,60,80,.9);z-index:999;}
.resize-handle-nw{top:-5px;left:-5px;cursor:nw-resize;}
.resize-handle-sw{bottom:-5px;left:-5px;cursor:sw-resize;}
.resize-handle-ne{top:-5px;right:-5px;cursor:ne-resize;}
.resize-handle-se{bottom:-5px;right:-5px;cursor:se-resize;}
.overlay{position:absolute;left:50%;top:50%;margin-left:-100px;margin-top:-100px;z-index:999;width:200px;height:200px;border:solid 2px rgba(222,60,80,.9);box-sizing:content-box;pointer-events:none;}
.overlay:after,.overlay:before{content:'';position:absolute;display:block;width:204px;height:40px;border-left:dashed 2px rgba(222,60,80,.9);border-right:dashed 2px rgba(222,60,80,.9);}
.overlay:before{top:0;margin-left:-2px;margin-top:-40px;}
.overlay:after{bottom:0;margin-left:-2px;margin-bottom:-40px;}
.overlay-inner:after,.overlay-inner:before{content:'';position:absolute;display:block;width:40px;height:204px;border-top:dashed 2px rgba(222,60,80,.9);border-bottom:dashed 2px rgba(222,60,80,.9);}
.overlay-inner:before{left:0;margin-left:-40px;margin-top:-2px;}
.overlay-inner:after{right:0;margin-right:-40px;margin-top:-2px;}
.btn-crop{position:absolute;vertical-align:bottom;right:5px;bottom:5px;padding:6px 10px;z-index:999;background-color:rgb(222,60,80);border:none;border-radius:5px;color:#FFF;}
.btn-crop img{vertical-align:middle;margin-left:8px;}
CSS代码(demo.css):
@font-face{font-weight:normal;font-style:normal;font-family:'codropsicons';src:url('../fonts/codropsicons/codropsicons.eot');src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),url('../fonts/codropsicons/codropsicons.woff') format('woff'),url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');}
*,*:after,*:before{-webkit-box-sizing:border-box;box-sizing:border-box;}
.clearfix:before,.clearfix:after{content:'';display:table;}
.clearfix:after{clear:both;}
body{background:#88ABC2;color:#EBF7F8;font-weight:500;font-size:1em;font-family:'Raleway',Arial,sans-serif;}
a{color:#D0E0EB;text-decoration:none;outline:none;}
a:hover,a:focus{color:#fff;}
.content{max-width:1290px;padding:0 1em;margin:0 auto;text-align:center;}
.component{position:relative;background:url(../img/gridme.png) repeat center center;padding:4em;height:500px;border:3px solid #49708A;max-width:901px;overflow:hidden;margin:0 auto;}
/* Header */
.codrops-header{padding:0 0 2em;letter-spacing:-1px;}
.codrops-header h1{font-weight:800;font-size:2.5em;line-height:1.3;margin:0.25em auto;}
.codrops-header h1 span,.a-tip{color:#49708A;}
.a-tip{padding:1em;}
.a-tip span{border:2px solid #fff;color:#fff;display:inline-block;padding:0 5px;}
/* Top Navigation Style */
.codrops-top{width:100%;text-transform:uppercase;font-weight:700;font-size:0.69em;line-height:2.2;}
.codrops-top a{display:inline-block;padding:1em 2em;text-decoration:none;letter-spacing:1px;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{display:block;float:left;}
.codrops-icon:before{margin:0 4px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'codropsicons';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
.codrops-icon-drop:before{content:"\e001";}
.codrops-icon-prev:before{content:"\e004";}
/* Codrops demo links */
.codrops-demos a{font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:0.5em 1em;margin:5px;display:inline-block;border:1px solid black;border-color:initial;border-radius:4px;}
.codrops-demos a.current-demo{color:#74777b;}
/* Related demos */
.related{text-align:center;padding:4em 0 2em;}
.related > a{width:calc(100% - 20px);max-width:340px;border:2px solid #49708A;display:inline-block;text-align:center;vertical-align:top;margin:20px 10px;padding:25px;}
.related a img{max-width:100%;opacity:0.8;}
.related a:hover img,.related a:active img{opacity:1;}
.related a h3{margin:0;padding:0.5em 0 0.3em;max-width:300px;text-align:left;min-height:60px;}
@media screen and (max-width:27em){.codrops-icon{font-size:1.5em;}
.codrops-icon span{display:none;}
}
CSS代码(normalize.css):
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}
分享到QQ
分享到微博
微信扫一扫
