技术思绪摘录旅行
有的系统上传图片做的很好,但是绝大部分系统上传图片都是只传图片或者带个压缩功能,无法让操作者自己来裁剪,又不能代码私自裁剪,只有选择图片之后,让操作者自己来更方便高效的选区裁剪,开发者只需要定好比例和尺寸即可。代码本来可以更加简单,底层也是调用了cropper.js的方法,样式几乎没写,可以根据自己的情况再次开发。

    有的系统上传图片做的很好,但是绝大部分系统上传图片都是只传图片或者带个压缩功能,无法让操作者自己来裁剪,又不能代码私自裁剪,只有选择图片之后,让操作者自己来更方便高效的选区裁剪,开发者只需要定好比例和尺寸即可。

    代码本来可以更加简单,底层也是调用了cropper.js的方法,样式几乎没写,可以根据自己的情况再次开发。

    如何将Canvas图片上传到服务器,之前的博文已经说过了,不重复了。

    


<!DOCTYPE html>    
<html>    
<head>    
<title>上传头像裁剪</title>    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    
<meta http-equiv="description" content="this is my page">    
<meta http-equiv="content-type" content="text/html; charset=UTF-8">    
<meta name="viewport"    
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>    
<link rel="stylesheet" href="cropper.css">    
<link rel="stylesheet" href="CropPlug.css">    
<style>    
#CropShowImg{    
border: 1px solid #ff0000;    
}    
#CropShowImg1{    
border: 1px solid #1a9fe0;    
}    
.CropShowImg img{    
width: 100px;    
}    
</style>    
</head>    
<body>    
<div>    
<input type="button" value="选择图片" class="CropFileInput" onclick="upload1();"/>    
<input type="button" value="选择图片" class="CropFileInput" onclick="upload2();"/>    
<div id="CropShowImg" class="CropShowImg">    
</div>    
<div id="CropShowImg1" class="CropShowImg">    
</div>    
</div>    
<input id="CropFileInput" type="file" accept="image/*"/>    
<div style="display: none;" id="CropContainer">    
<img src="">    
<div id="Cropbtns" class="Cropbtns">    
<button data-method="CropDestroy" class="btnCropDestroy">取消</button>    
<button data-method="CropGetCanvas" class="btnGetCroppedCanvas">确认</button>    
</div>    
</div>    
</body>    
<script type="text/javascript" src="jquery.min.js"></script>    
<script type="text/javascript" src="cropper.js"></script>    
<script type="text/javascript" src="CropPlug-in.js"></script>    
<script type="text/javascript">    
var upload1=function () {    
Cropinit(1/1,'CropShowImg');    
$('#CropFileInput').click();    
}    
var upload2=function () {    
Cropinit(9/16,'CropShowImg1');    
$('#CropFileInput').click();    
}    
</script>    
</html>    

CSS:
#CropFileInput{
    display: none;
}

#CropContainer {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
}

#CropContainer .Cropbtns {
    position: fixed;
    bottom: 20px;
    text-align: center;
    width: 100%;
}

#CropContainer .Cropbtns button {
    color: #fff;
    border: none;
    padding: 10px 35px;
    outline: none;
    font-size: 18px;
}

#CropContainer .Cropbtns button:nth-child(1) {
    background: #999999;
}

#CropContainer .Cropbtns button:nth-child(2) {
    background: #e38d13;
}
JS:
var CropinputImage = document.getElementById('CropFileInput');//上传控件
var CropshowImg;//结果展示img
var CropfileImg = "";
var Cropper ;
var cropper;
var Cropcontainer = document.getElementById('CropContainer');//选图区域
var Cropimage = Cropcontainer.getElementsByTagName('img').item(0);//背景图
var Cropactions = document.getElementById('Cropbtns');//按钮区域
var CropscreenWidth = $(window).width();
var CropscreenHeight = $(window).height();
window.onload = function () {
    //按钮事件
    Cropactions.onclick = function (event) {
        var e = event || window.event;
        var target = e.target || e.srcElement;
        var result;
        var data;
        if (!cropper) {
            return;
        }
        while (target !== this) {
            if (target.getAttribute('data-method')) {
                break;
            }
            target = target.parentNode;
        }
        if (target === this || target.disabled || target.className.indexOf('disabled') > -1) {
            return;
        }
        data = {
            method: target.getAttribute('data-method'),
            option: target.getAttribute('data-option'),
            secondOption: target.getAttribute('data-second-option')
        };
        if (data.method) {
            switch (data.method) {
                case 'CropGetCanvas':
                    result = cropper["getCroppedCanvas"](data.option, data.secondOption);
                    CropfileImg = result.toDataURL('image/jpg');
                    // if (result) {
                    //     var fm = new FormData();
                    //     fm.append("fileT", CropfileImg);
                    //     var url = "http://up.dongzouxizou.com/FileCustomUpload/UpLoading?bucket=wxshopcdn&isThumbnail=false&folder=lifeGoods/&type=jpg";
                    //     $.ajax({
                    //         url: url,
                    //         type: 'POST',
                    //         cache: false,
                    //         data: fm,
                    //         processData: false,
                    //         contentType: false
                    //     }).done(function (res) {
                    //         if (res.IsSucceed) {
                    //             var netimg = "http://wsfile.dongzouxizou.com.cn/" + res.FileUrl;
                    //
                    //         } else {
                    //             alert("上传失败:" + res.Message);
                    //         }
                    //     }).fail(function (res) {
                    //         alert("上传失败:" + res);
                    //     });
                    // }
                    var bl = document.createElement('div');
                    bl.classList.add('item');
                    var img = document.createElement("img");
                    img.src = CropfileImg;
                    bl.appendChild(img);
                    var close = document.createElement('span');
                    close.innerText = "删除";
                    close.addEventListener('click', function () {
                        var a = this.parentNode;
                        var b = this.parentNode.parentNode;
                        b.removeChild(a);
                    });
                    bl.appendChild(close);
                        CropshowImg.appendChild(bl);//截图结果
                    Cropcontainer.style.display = "none";
                    CropinputImage.value = "";//上传控件
                    break;
                case 'CropDestroy':
                    CropinputImage.value = "";//上传控件
                    Cropcontainer.style.display = "none";
                    break;
            }
        }
    };
    // 上传文件选择控件监控
    var URL = window.URL || window.webkitURL;
    if (URL) {
        CropinputImage.onchange = function () {
            var files = this.files;
            var file;
            if (cropper && files && files.length) {
                file = files[0];
                if (/^image\/\w+/.test(file.type)) {
                    var blobURL = URL.createObjectURL(file);
                    cropper.reset().replace(blobURL);
                } else {
                    window.alert('请选择图片文件');
                }
            }
        };
    } else {
        CropinputImage.disabled = true;
    }
};


//初始化  a:比例,b:存放结果的元素ID
var Cropinit=function (a,b) {
    'use strict';
    Cropper = window.Cropper;
    CropscreenWidth = $(window).width();
    CropscreenHeight = $(window).height();
    CropshowImg = document.getElementById(b);//结果展示img
    var options = {
        minContainerHeight: CropscreenHeight,
        minContainerWidth: CropscreenWidth,
        aspectRatio: a,
        viewMode: 1,//显示
        guides: true,//裁剪框虚线 默认true有
        dragMode: "move",
        build: function (e) { //加载开始
            //可以放你的过渡 效果
        },
        built: function (e) { //加载完成
            Cropcontainer.style.display = "block";//显示选图区域
        },
        zoom: function (e) {
        },
        background: true,// 容器是否显示网格背景
        movable: true,//是否能移动图片
        cropBoxMovable: true,//是否允许拖动裁剪框
        cropBoxResizable: true,//是否允许拖动 改变裁剪框大小
    };
    cropper = new Cropper(Cropimage, options);
}



CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

精选推荐

阅读排行

友情打赏

请打开您的微信,扫一扫