cropbox插件实现的头像裁剪效果

html代码

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <!--[if lt IE 9]>

  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>

  <![endif]-->

    <title>Tinny Cropper</title>

    <link rel="stylesheet" href="style.css" type="text/css" />

    <style>

        .container

        {

            position: absolute;

            top: 10%; left: 10%; right: 0; bottom: 0;

        }

        .action

        {

            width: 400px;

            height: 30px;

            margin: 10px 0;

        }

        .cropped>img

        {

            margin-right: 10px;

        }

    </style>

</head>

<body>

<script src="../cropbox.js"></script>

<div class="container">

    <div class="imageBox">

        <div class="thumbBox"></div>

        <div class="spinner" style="display: none">Loading...</div>

    </div>

    <div class="action">

        <input type="file" id="file" style="float:left; width: 250px">

        <input type="button" id="btnCrop" value="Crop" style="float: right">

        <input type="button" id="btnZoomIn" value="+" style="float: right">

        <input type="button" id="btnZoomOut" value="-" style="float: right">

    </div>

    <div class="cropped">

    </div>

</div>

<script type="text/javascript">

    window.onload = function() {

        var options =

        {

            imageBox: '.imageBox',

            thumbBox: '.thumbBox',

            spinner: '.spinner',

            imgSrc: 'avatar.png'

        }

        var cropper;

        document.querySelector('#file').addEventListener('change', function(){

            var reader = new FileReader();

            reader.onload = function(e) {

                options.imgSrc = e.target.result;

                cropper = new cropbox(options);

            }

            reader.readAsDataURL(this.files[0]);

            this.files = [];

        })

        document.querySelector('#btnCrop').addEventListener('click', function(){

            var img = cropper.getDataURL()

            document.querySelector('.cropped').innerHTML += '<img src="'+img+'">';

        })

        document.querySelector('#btnZoomIn').addEventListener('click', function(){

            cropper.zoomIn();

        })

        document.querySelector('#btnZoomOut').addEventListener('click', function(){

            cropper.zoomOut();

        })

    };

</script>

</body>

</html>

css样式

.imageBox

{

    position: relative;

    height: 400px;

    width: 400px;

    border:1px solid #aaa;

    background: #fff;

    overflow: hidden;

    background-repeat: no-repeat;

    cursor:move;

}

.imageBox .thumbBox

{

    position: absolute;

    top: 50%;

    left: 50%;

    width: 200px;

    height: 200px;

    margin-top: -100px;

    margin-left: -100px;

    box-sizing: border-box;

    border: 1px solid rgb(102, 102, 102);

    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);

    background: none repeat scroll 0% 0% transparent;

}

.imageBox .spinner

{

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    text-align: center;

    line-height: 400px;

    background: rgba(0,0,0,0.7);

}

　js代码

/**

 * Created by ezgoing on 14/9/2014.

 */

'use strict';

var cropbox = function(options){

    var el = document.querySelector(options.imageBox),

    obj =

    {

        state : {},

        ratio : 1,

        options : options,

        imageBox : el,

        thumbBox : el.querySelector(options.thumbBox),

        spinner : el.querySelector(options.spinner),

        image : new Image(),

        getDataURL: function ()

        {

            var width = this.thumbBox.clientWidth,

                height = this.thumbBox.clientHeight,

                canvas = document.createElement("canvas"),

                dim = el.style.backgroundPosition.split(' '),

                size = el.style.backgroundSize.split(' '),

                dx = parseInt(dim[0]) - el.clientWidth/2 + width/2,

                dy = parseInt(dim[1]) - el.clientHeight/2 + height/2,

                dw = parseInt(size[0]),

                dh = parseInt(size[1]),

                sh = parseInt(this.image.height),

                sw = parseInt(this.image.width);

            canvas.width = width;

            canvas.height = height;

            var context = canvas.getContext("2d");

            context.drawImage(this.image, 0, 0, sw, sh, dx, dy, dw, dh);

            var imageData = canvas.toDataURL('image/png');

            return imageData;

        },

        getBlob: function()

        {

            var imageData = this.getDataURL();

            var b64 = imageData.replace('data:image/png;base64,','');

            var binary = atob(b64);

            var array = [];

            for (var i = 0; i < binary.length; i++) {

                array.push(binary.charCodeAt(i));

            }

            return  new Blob([new Uint8Array(array)], {type: 'image/png'});

        },

        zoomIn: function ()

        {

            this.ratio*=1.1;

            setBackground();

        },

        zoomOut: function ()

        {

            this.ratio*=0.9;

            setBackground();

        }

    },

    attachEvent = function(node, event, cb)

    {

        if (node.attachEvent)

            node.attachEvent('on'+event, cb);

        else if (node.addEventListener)

            node.addEventListener(event, cb);

    },

    detachEvent = function(node, event, cb)

    {

        if(node.detachEvent) {

            node.detachEvent('on'+event, cb);

        }

        else if(node.removeEventListener) {

            node.removeEventListener(event, render);

        }

    },

    stopEvent = function (e) {

        if(window.event) e.cancelBubble = true;

        else e.stopImmediatePropagation();

    },

    setBackground = function()

    {

        var w =  parseInt(obj.image.width)*obj.ratio;

        var h =  parseInt(obj.image.height)*obj.ratio;

        var pw = (el.clientWidth - w) / 2;

        var ph = (el.clientHeight - h) / 2;

        el.setAttribute('style',

                'background-image: url(' + obj.image.src + '); ' +

                'background-size: ' + w +'px ' + h + 'px; ' +

                'background-position: ' + pw + 'px ' + ph + 'px; ' +

                'background-repeat: no-repeat');

    },

    imgMouseDown = function(e)

    {

        stopEvent(e);

        obj.state.dragable = true;

        obj.state.mouseX = e.clientX;

        obj.state.mouseY = e.clientY;

    },

    imgMouseMove = function(e)

    {

        stopEvent(e);

        if (obj.state.dragable)

        {

            var x = e.clientX - obj.state.mouseX;

            var y = e.clientY - obj.state.mouseY;

            var bg = el.style.backgroundPosition.split(' ');

            var bgX = x + parseInt(bg[0]);

            var bgY = y + parseInt(bg[1]);

            el.style.backgroundPosition = bgX +'px ' + bgY + 'px';

            obj.state.mouseX = e.clientX;

            obj.state.mouseY = e.clientY;

        }

    },

    imgMouseUp = function(e)

    {

        stopEvent(e);

        obj.state.dragable = false;

    },

    zoomImage = function(e)

    {

        var evt=window.event || e;

        var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta;

        delta > -120 ? obj.ratio*=1.1 : obj.ratio*=0.9;

        setBackground();

    }

    obj.spinner.style.display = 'block';

    obj.image.onload = function() {

        obj.spinner.style.display = 'none';

        setBackground();

        attachEvent(el, 'mousedown', imgMouseDown);

        attachEvent(el, 'mousemove', imgMouseMove);

        attachEvent(document.body, 'mouseup', imgMouseUp);

        var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';

        attachEvent(el, mousewheel, zoomImage);

    };

    obj.image.src = options.imgSrc;

    attachEvent(el, 'DOMNodeRemoved', function(){detachEvent(document.body, 'DOMNodeRemoved', imgMouseUp)});

    return obj;

};

cropbox插件实现的头像裁剪效果的更多相关文章

基于jQuery头像裁剪插件cropbox
今天给大家分享一款基于jQuery头像裁剪插件cropbox,这是一款简单实用的jQuery头像在线裁剪插件.该插件适用于适用浏览器:IE8.360.FireFox.Chrome.Safari.Ope ...
如何用CropBox实现头像裁剪并与java后台交互
如何用CropBox实现头像裁剪并与java后台交互参考网站:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 参考: http://blo ...
第三百九十节，Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传
第三百九十节,Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传实现原理前台用cropper插件,将用户上传头像时裁剪图片的坐标和图片,传到逻辑处理 ...
用JQuery仿造QQ头像裁剪功能
最近工作真心忙碌,几乎没时间写博客.今天趁周末来仿一个QQ头像裁剪功能插件.效果如下: 所有文件都可在我的Github上下载,从头到尾从简到繁按步骤一共分了9个HTML文件,每个步骤文件里的注释都写的 ...
springMVC 头像裁剪上传并等比压
第一次写头像裁剪上传,原本想着直接本地预览裁剪再上传,可是时间有限,jquery.jcrop貌似并没有对假设是ie下图片预览效果是滤镜做的做出对应处理,也没有时间去改;仅仅好将就一下先把图片上传 ...
js插件---强大的图片裁剪Cropper
js插件---强大的图片裁剪Cropper 一.总结一句话总结:官网或者github里面的文档或者demo才是真的详细使用的话找到图片裁剪后的base64数据,然后这个数据可下载可传递到服务器 1 ...
Cesium专栏-裁剪效果（基于3dtiles模型，附源码下载）
Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...
Django使用cropbox包来上传裁剪图片
1.使用cropbox包来上传裁剪图片,可见介绍:https://www.jianshu.com/p/6c269f0b48c0I ImgCrop包包括:css--style.css,js--cropb ...
jQuery插件实例五：手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

随机推荐

PHP MySQL 创建数据库和表之 Create
创建数据库 CREATE DATABASE 语句用于在 MySQL 中创建数据库. 语法 CREATE DATABASE database_name 为了让 PHP 执行上面的语句,我们必须使用 my ...
Hibernate更新部分字段浅谈
update语句是在Hibernate的Configuration的时候生成的,不能动态改变.为什么update的时候所有的属性都一起update,而不是只更新改变字段,其实这是一个比较值得探讨的问题 ...
Cocos2d-x v3.0正式版尝鲜体验【1】环境搭建和新建项目
Cocos2d-x v3.0在前天最终公布正式版了,等了大半年最终出来了.一直没去碰之前的3.0各种beta,rc版本号,就想等正式版出来再尝试. 昨天也參加了触控科技在成都举办的沙龙活动.看到作者王 ...
兼容各个浏览器的H.264播放： H.264+HTML5+FLOWPLAYER+WOWZA+RMTP
一.方案确定计划做视频播放,要求可以播放H264编码的mp4文件,各个浏览器,各种终端都能播放. 首先查找可行性方案, http://www.cnblogs.com/sink_cup/archive ...
Esper学习之六：EPL语法（二）
中秋三天,说闲也不闲,调调工作的代码,倒还解决不少问题.不过也是因为最近工作忙的缘故,Esper被我冷落不少日子了,趁着今天最后一天,赶紧写一篇出来. 从上一篇开始说EPL的语法,主要是关于注解的.今 ...
【贪心】【uva11520】 Fill the Square
填充正方形(Fill the Square, UVa 11520) 在一个n×n网格中填了一些大写字母,你的任务是把剩下的格子中也填满大写字母,使得任意两个相邻格子(即有公共边的格子)中的字母不同.如 ...
Android设置背景
一.设置图片背景首先你先将一个的背景图片存入工程中res/drawble(当然drawble-hdpi.drawble-mdpi.drawble-ldpi中一个或者几个文件夹都可)文件夹中.假如我存 ...
归并排序java
import java.util.Arrays; public class MergeSort { public static void main(String[] args) { MergeSort ...
What is SignalR and Why Should I Use It?
原文地址: What is SignalR and why should I use it? When I first heard about SignalR, I was not sure what ...
const参数，const返回值与const函数
在C++程序中,经常用const 来限制对一个对象的操作,例如,将一个变量定义为const 的: const int n=3; 则这个变量的值不能被修改,即不能对变量赋值. const 这个关键字 ...

cropbox插件实现的头像裁剪效果

cropbox插件实现的头像裁剪效果的更多相关文章

随机推荐

热门专题