HTML5图片裁切特效代码,可放大图片

2024-09-05 12:18:51

字体：大中小

来源：转载

供稿：网友

HTML5实现流行的头像图片裁切效果，裁切时放大选区，为了演示方便，调用了一张像素不太高的图片，太高像素的图片加载速度有点慢，你本地测试可找个高质量图片试下。本效果需要在支持HTML5的浏览器中运行，比如Chrome、火狐等，运行环境请尽量选择服务器中，不要直接双击HTML页面打开。

<!DOCTYPE html><html lang="en" ><head><title>HTML5图片裁切特效代码</title><style>*{    margin:0;    padding:0;}body {    background-color:#74b1d1;    color:#fff;    font:14px/1.3 Arial,sans-serif;}header {    background-color:#212121;    box-shadow: 0 -1px 2px #111111;    display:block;    height:70px;    position:relative;    width:100%;    z-index:100;}header h2{    font-size:22px;    font-weight:normal;    left:50%;    margin-left:-400px;    padding:22px 0;    position:absolute;    width:540px;}header a.stuts,a.stuts:visited{    border:none;    text-decoration:none;    color:#fcfcfc;    font-size:14px;    left:50%;    line-height:31px;    margin:23px 0 0 110px;    position:absolute;    top:0;}header .stuts span {    font-size:22px;    font-weight:bold;    margin-left:5px;}.container {    overflow:hidden;    width:989px;    margin:20px auto;}.contr {    background-color:#212121;    padding:10px 0;    text-align:center;    border-radius:10px 10px 0 0;    -moz-border-radius:10px 10px 0 0;    -webkit-border-radius:10px 10px 0 0;}.contr button {    padding:5px 10px;}#panel {    float:left;    width:785px;}#results {    float:right;    text-align: center;    width:195px;}#results img {    background-color:#fff;    display:block;    height:200px;    width:200px;}</style><script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script><script>var canvas, ctx;var image;var iMouseX, iMouseY = 1;var theSelection;function Selection(x, y, w, h){    this.x = x; // initial positions    this.y = y;    this.w = w; // and size    this.h = h;    this.px = x; // extra variables to dragging calculations    this.py = y;    this.csize = 6; // resize cubes size    this.csizeh = 10; // resize cubes size (on hover)    this.bHow = [false, false, false, false]; // hover statuses    this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // resize cubes sizes    this.bDrag = [false, false, false, false]; // drag statuses    this.bDragAll = false; // drag whole selection}Selection.prototype.draw = function(){    ctx.strokeStyle = '#000';    ctx.lineWidth = 2;    ctx.strokeRect(this.x, this.y, this.w, this.h);    // draw part of original image    if (this.w > 0 && this.h > 0) {        ctx.drawImage(image, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h);    }    // draw resize cubes    ctx.fillStyle = '#fff';    ctx.fillRect(this.x - this.iCSize[0], this.y - this.iCSize[0], this.iCSize[0] * 2, this.iCSize[0] * 2);    ctx.fillRect(this.x + this.w - this.iCSize[1], this.y - this.iCSize[1], this.iCSize[1] * 2, this.iCSize[1] * 2);    ctx.fillRect(this.x + this.w - this.iCSize[2], this.y + this.h - this.iCSize[2], this.iCSize[2] * 2, this.iCSize[2] * 2);    ctx.fillRect(this.x - this.iCSize[3], this.y + this.h - this.iCSize[3], this.iCSize[3] * 2, this.iCSize[3] * 2);}function drawScene() { // main drawScene function    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // clear canvas    ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);    theSelection.draw();}$(function(){    image = new Image();    image.onload = function () {    }    image.src = '/jscss/demoimg/image.jpg';    canvas = document.getElementById('panel');    ctx = canvas.getContext('2d');    theSelection = new Selection(200, 200, 200, 200);    $('#panel').mousemove(function(e) { // binding mouse move event        var canvasOffset = $(canvas).offset();        iMouseX = Math.floor(e.pageX - canvasOffset.left);        iMouseY = Math.floor(e.pageY - canvasOffset.top);        // in case of drag of whole selector        if (theSelection.bDragAll) {            theSelection.x = iMouseX - theSelection.px;            theSelection.y = iMouseY - theSelection.py;        }        for (i = 0; i < 4; i++) {            theSelection.bHow[i] = false;            theSelection.iCSize[i] = theSelection.csize;        }        // hovering over resize cubes        if (iMouseX > theSelection.x - theSelection.csizeh && iMouseX < theSelection.x + theSelection.csizeh &&            iMouseY > theSelection.y - theSelection.csizeh && iMouseY < theSelection.y + theSelection.csizeh) {            theSelection.bHow[0] = true;            theSelection.iCSize[0] = theSelection.csizeh;        }        if (iMouseX > theSelection.x + theSelection.w-theSelection.csizeh && iMouseX < theSelection.x + theSelection.w + theSelection.csizeh &&            iMouseY > theSelection.y - theSelection.csizeh && iMouseY < theSelection.y + theSelection.csizeh) {            theSelection.bHow[1] = true;            theSelection.iCSize[1] = theSelection.csizeh;        }        if (iMouseX > theSelection.x + theSelection.w-theSelection.csizeh && iMouseX < theSelection.x + theSelection.w + theSelection.csizeh &&            iMouseY > theSelection.y + theSelection.h-theSelection.csizeh && iMouseY < theSelection.y + theSelection.h + theSelection.csizeh) {            theSelection.bHow[2] = true;            theSelection.iCSize[2] = theSelection.csizeh;        }        if (iMouseX > theSelection.x - theSelection.csizeh && iMouseX < theSelection.x + theSelection.csizeh &&            iMouseY > theSelection.y + theSelection.h-theSelection.csizeh && iMouseY < theSelection.y + theSelection.h + theSelection.csizeh) {            theSelection.bHow[3] = true;            theSelection.iCSize[3] = theSelection.csizeh;        }        // in case of dragging of resize cubes        var iFW, iFH;        if (theSelection.bDrag[0]) {            var iFX = iMouseX - theSelection.px;            var iFY = iMouseY - theSelection.py;            iFW = theSelection.w + theSelection.x - iFX;            iFH = theSelection.h + theSelection.y - iFY;        }        if (theSelection.bDrag[1]) {            var iFX = theSelection.x;            var iFY = iMouseY - theSelection.py;            iFW = iMouseX - theSelection.px - iFX;            iFH = theSelection.h + theSelection.y - iFY;        }        if (theSelection.bDrag[2]) {            var iFX = theSelection.x;            var iFY = theSelection.y;            iFW = iMouseX - theSelection.px - iFX;            iFH = iMouseY - theSelection.py - iFY;        }        if (theSelection.bDrag[3]) {            var iFX = iMouseX - theSelection.px;            var iFY = theSelection.y;            iFW = theSelection.w + theSelection.x - iFX;            iFH = iMouseY - theSelection.py - iFY;        }        if (iFW > theSelection.csizeh * 2 && iFH > theSelection.csizeh * 2) {            theSelection.w = iFW;            theSelection.h = iFH;            theSelection.x = iFX;            theSelection.y = iFY;        }        drawScene();    });    $('#panel').mousedown(function(e) { // binding mousedown event        var canvasOffset = $(canvas).offset();        iMouseX = Math.floor(e.pageX - canvasOffset.left);        iMouseY = Math.floor(e.pageY - canvasOffset.top);        theSelection.px = iMouseX - theSelection.x;        theSelection.py = iMouseY - theSelection.y;        if (theSelection.bHow[0]) {            theSelection.px = iMouseX - theSelection.x;            theSelection.py = iMouseY - theSelection.y;        }        if (theSelection.bHow[1]) {            theSelection.px = iMouseX - theSelection.x - theSelection.w;            theSelection.py = iMouseY - theSelection.y;        }        if (theSelection.bHow[2]) {            theSelection.px = iMouseX - theSelection.x - theSelection.w;            theSelection.py = iMouseY - theSelection.y - theSelection.h;        }        if (theSelection.bHow[3]) {            theSelection.px = iMouseX - theSelection.x;            theSelection.py = iMouseY - theSelection.y - theSelection.h;        }        if (iMouseX > theSelection.x + theSelection.csizeh && iMouseX < theSelection.x+theSelection.w - theSelection.csizeh &&            iMouseY > theSelection.y + theSelection.csizeh && iMouseY < theSelection.y+theSelection.h - theSelection.csizeh) {            theSelection.bDragAll = true;        }        for (i = 0; i < 4; i++) {            if (theSelection.bHow[i]) {                theSelection.bDrag[i] = true;            }        }    });    $('#panel').mouseup(function(e) { // binding mouseup event        theSelection.bDragAll = false;        for (i = 0; i < 4; i++) {            theSelection.bDrag[i] = false;        }        theSelection.px = 0;        theSelection.py = 0;    });    drawScene();});function getResults() {    var temp_ctx, temp_canvas;    temp_canvas = document.createElement('canvas');    temp_ctx = temp_canvas.getContext('2d');    temp_canvas.width = theSelection.w;    temp_canvas.height = theSelection.h;    temp_ctx.drawImage(image, theSelection.x, theSelection.y, theSelection.w, theSelection.h, 0, 0, theSelection.w, theSelection.h);    var vData = temp_canvas.toDataURL();    $('#crop_result').attr('src', vData);    $('#results h2').text('Well done, we have prepared our cropped image, now you can save it if you wish');}</script></head><body><header><h2>HTML5 图片裁切，可放大显示</h2></header>        <div class="container">            <div class="contr">                <button onclick="getResults()">裁切</button>            </div>            <canvas id="panel" width="779" height="519"></canvas>            <div id="results">                <h2>Please make selection for cropping and click 'Crop' button.</h2>                <img id="crop_result" />            </div>        </div>    </body></html>

上一篇：CSS3鼠标点击动画-旋转的按钮

下一篇：CSS3网页时钟，圆形的电子钟