上传图片前裁剪

最新推荐文章于 2024-06-19 19:25:56 发布

雨轻伤

最新推荐文章于 2024-06-19 19:25:56 发布

阅读量885

点赞数

文章标签：图片处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像裁剪-Jcrop</title>
    <link rel="stylesheet" href="jquery.Jcrop.min.css" type="text/css" />
    <style>
        img {
            border: 0;
        }
        * {
            margin: 0;
            padding: 0;
        }
        .head {
            display: inline-block;
            width: auto;
            height: auto;
        }
        #target{
            max-width: 600px;
        }


        canvas {
            position: fixed;
            top: 400px;
            right: 0;
            border: 1px solid red;
            width: 340px;
            height: 208px;
        }
        #myCan{
            display: none;
        }
    </style>


</head>
<body>

<!-- 头像 -->
<div class="head" >
    <img src=""  id="target" />
    <input type="file" id="file" onchange="changeFile()" style="display: none;"/>
</div>

<img src="" class="chang" alt="">
<button onClick="openBrowse()">上传图片</button>
<button onClick="uploadFile()">确认</button>
<!-- 画板 -->
<canvas id="myCan" width="340" height="208"></canvas>
<script src="jquery.min.js"></script>
<script src="jquery.Jcrop.min.js"></script>
<script type="text/javascript">
    // 定义一些使用的变量
    var     jcrop_api,//jcrop对象
            boundx,//图片实际显示宽度
            boundy,//图片实际显示高度
            realWidth,// 真实图片宽度
            realHeight, //真实图片高度
             // 使用的jquery对象
            $target = $('#target'),
            xsize = 170,
            ysize = 104;

    //1、打开浏览器
    function openBrowse(){
        var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false;
        if(ie){
            document.getElementById("file").click();
        }else{
            var a=document.createEvent("MouseEvents");
            a.initEvent("click", true, true);
            document.getElementById("file").dispatchEvent(a);
        }
    }

    //2、从 file 域获取 本地图片 url
    function getFileUrl(sourceId) {
        var url;
        if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
            url = document.getElementById(sourceId).value;
        } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        } else if(navigator.userAgent.indexOf("Safari")>0) { // Chrome
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        }
        return url;
    }
    //选择文件事件
    function changeFile() {
        var url = getFileUrl("file");//根据id获取文件路径
        preImg(url);
        return false;
    }
    //3、将本地图片 显示到浏览器上
    function preImg(url) {
        console.log('url===' + url);
        //图片裁剪逻辑
        if(jcrop_api){//判断jcrop_api是否被初始化过
            jcrop_api.destroy();
            console.log(jcrop_api);
        }
        //初始化图片
        initTarget();
        var image = document.getElementById('target');
        image.onload=function(){//图片加载是一个异步的过程
            //获取图片文件真实宽度和大小
            var img = new Image();
            img.onload=function(){
                realWidth = img.width;
                realHeight = img.height;
                //获取图片真实高度之后
                initJcrop();//初始化Jcrop插件
            };
            img.src = url;
        };
        image.src = url;
    }

    //初始化Jcrop插件
    function initJcrop(){
        $target.removeAttr("style");//清空上一次初始化设置的样式
        $target.Jcrop({
            setSelect:[10,10,350,218],
            onChange: updatePreview,
            onSelect: updatePreview,
            aspectRatio: xsize / ysize
        },function(){
            //初始化后回调函数
            // 获取图片实际显示的大小
            var bounds = this.getBounds();
            boundx = bounds[0];//图片实际显示宽度
            boundy = bounds[1];//图片实际显示高度
            // 保存jcrop_api变量
            updatePreview({
                h: 208,
                w: 340,
                x: 10,
                x2: 350,
                y: 10,
                y2: 218
            });
            jcrop_api = this;
            console.log(jcrop_api)
        });
    }

    //更新显示预览内容
    function updatePreview(c){
        console.log(c);
        if (parseInt(c.w) > 0) {
            //更新canvas画板内容
            var img=document.getElementById("target");
            var ct=document.getElementById("myCan");
            var ctx=ct.getContext("2d");
            //清空画板
            ctx.clearRect(0,0, ct.width, ct.height);
            //.drawImage(图像对象,原图像截取的起始X坐标,原图像截取的起始Y坐标,原图像截取的宽度,原图像截取的高度，绘制图像的起始X坐标,绘制图像的起始Y坐标,绘制图像所需要的宽度,绘制图像所需要的高度);
            ctx.drawImage(img, c.x/boundx * realWidth,c.y/boundy * realHeight, c.w/boundx * realWidth, c.h/boundy * realHeight,0,0, 340, 208);
        }
    }

    //初始化预览div内容
    function initTarget(){
        $target.removeAttr("style");//清空上一次初始化设置的样式
        $target.css({
            maxWidth:  '100%',
            maxHeight: '100%'
        });
    }

    //文件上传
    function uploadFile(){
        //获取裁剪完后的base64图片url,转换为blob
        var data=document.getElementById("myCan").toDataURL();
        var arr = data.split(',');
        var mime = arr[0].match(/:(.*?);/)[1];
        var bstr = atob(arr[1]);
        var n = bstr.length;
        var u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        console.log(new File([u8arr],"压缩", {type:mime}));
        $(".chang").attr("src",data)
    }

    //把base64位的toDataURL图片转换成blob
    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }

    window.onload = function () {
        //初始化图片
        preImg('./1.jpg');
    };

</script>
</body>
</html>

文档地址：http://code.ciaoca.com/jquery/jcrop/

demo下载地址：https://download.csdn.net/download/a707369808/10762306

文档里面有免费的下载地址

雨轻伤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
上传图片前裁剪

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图像裁剪-Jcrop&lt;/title&gt; &lt;link rel="stylesheet" href=&quot
复制链接

扫一扫