zoukankan      html  css  js  c++  java
  • 基于jQuery头像裁剪插件cropbox

    今天给大家分享一款基于jQuery头像裁剪插件cropbox,这是一款简单实用的jQuery头像在线裁剪插件。该插件适用于适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:

    在线预览   源码下载

    实现的代码。

    html代码:

      <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;  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>

    css代码:

       .container
            {
                position: absolute;
                top: 5%;
                left: 36%;
                right: 0;
                bottom: 0;
            }
            .action
            {
                width: 400px;
                height: 30px;
                margin: 10px 0;
            }
            .cropped > img
            {
                margin-right: 10px;
            }

    javascript代码:

    $(window).load(function () {
                var options =
            {
                thumbBox: '.thumbBox',
                spinner: '.spinner',
                imgSrc: 'images/avatar.png'
            }
                var cropper = $('.imageBox').cropbox(options);
                $('#file').on('change', function () {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        options.imgSrc = e.target.result;
                        cropper = $('.imageBox').cropbox(options);
                    }
                    reader.readAsDataURL(this.files[0]);
                    this.files = [];
                })
                $('#btnCrop').on('click', function () {
                    var img = cropper.getDataURL();
                    $('.cropped').append('<img src="' + img + '">');
                })
                $('#btnZoomIn').on('click', function () {
                    cropper.zoomIn();
                })
                $('#btnZoomOut').on('click', function () {
                    cropper.zoomOut();
                })
            });

    via:http://www.w2bc.com/Article/26838

  • 相关阅读:
    perl中shift 和unshift 操作
    Perl 关于 use strict 的用法
    Windows7鼠标右键里没有新建文本文件的选项,解决办法
    大唐笔试题
    常用的设计模式
    优化C++程序编译效率的一些方法
    TCP连接,传输数据时的粘包问题讨论
    单链表是否有环及环入口点
    构造函数和析构函数能否声明为虚函数?
    azkaban 执行hive语句
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4325827.html
Copyright © 2011-2022 走看看