加入收藏 | 设为首页 | 会员中心 | 我要投稿 银川站长网 (https://www.0951zz.com/)- 云通信、基础存储、云上网络、机器学习、视觉智能!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

cropper.js+exif.js怎样达成头像上传的基本编辑操作

发布时间:2023-08-05 11:03:28 所属栏目:语言 来源:
导读:在日常操作或是项目的实际应用中,有不少朋友对于“cropper.js+exif.js怎样实现头像上传的基本编辑操作”的问题会存在疑惑,下面小编给大家整理和分享了相关知识和资料,易于大家学习和理解,有需要的朋友

在日常操作或是项目的实际应用中,有不少朋友对于“cropper.js+exif.js怎样实现头像上传的基本编辑操作”的问题会存在疑惑,下面小编给大家整理和分享了相关知识和资料,易于大家学习和理解,有需要的朋友可以借鉴参考,下面我们一起来了解一下吧。

头像上传的基本编辑操作,包括缩放、裁、旋转。具体代码如下:

做了一个头像上传的小功能,同时处理了ios竖着拍照图片旋转的问题。cropper.js(注意:cropper压缩版的js在手机版版缩放图片会有黑屏和图片飞了的bug,所以建议引入开发版本的cropper)依赖jquery,exif是用来获取拍照信息的,用于修复ios竖着拍照旋转的问题,我用的是amazeui框架,我在文件中也引入。

这是html文件

<!doctype html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>cropper图片裁剪缩放</title>

    <link rel="stylesheet" href="css/amazeui.min.css">

    <link rel="stylesheet" href="css/cropper.css">

    <link rel="stylesheet" href="css/amazeui.cropper.css">

</head>

<body>

    <div class="am-form-group">

        <label>logo</label>

        <div class="am-cf">

            <a href="javascript:;" id="up-img-touch" data-am-modal="{target: '#doc-modal-1'}">

                <img src="picture-2.jpg" id="pic_img" style="width: 100px;">

                <input type="hidden" name="new_pic" id="new_pic" value="">

            </a>

        </div>

    </div>

    <!--图片上传框-->

    <div class="am-popup up-frame-bj " id="doc-modal-1">

        <div class="am-modal-dialog up-frame-parent up-frame-radius">

            <div class="header_check header_setting">

                <a href="javascript:;" class="iconfont" data-am-modal-close>关闭</a>

                <h1>上传</h1>

            </div>

            <div class="up-frame-body">

                <div class="up-pre-main am-cf" >

                    <div class="up-pre-before up-frame-radius">

                        <img alt="" src="" id="image">

                    </div>

                </div>

                <div class="upload_btn am-cf">

                    <div class="am-fl am-form-file">

                        <button type="button" class="am-btn">上传图片</button>

                        <input type="file" id="inputImage">

                    </div>

                    <div class="rotateimg">

                        <span οnclick="rotateimgleft()">左</span>

                        <span οnclick="rotateimgright()">右</span>

                    </div>

                    <div class="am-fr">

                        <button type="button" class="am-btn"  id="up-btn-ok" url="admin/user/upload.action">确定</button>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

<script src="js/jquery.min.js" charset="utf-8"></script>

<script src="js/amazeui.min.js" charset="utf-8"></script>

<script src="js/cropper.js" charset="utf-8"></script>

<script src="js/exif.js" charset="utf-8"></script>

<script src="js/custom_up_img.js" charset="utf-8"></script>

</html>

这是js文件

$(function() {

    'use strict';

    // 初始化

    var $image = $('#image');

    $image.cropper({

        aspectRatio:1/1,

        viewMode : 1,

        autoCropArea:0.8,

        dragMode:'move',

        cropBoxMovable:false,

        cropBoxResizable:false,

        zoomOnTouch:true,

        zoomable:true,

        movable:true,

    });

    var $inputImage = $('#inputImage');

    var URL = window.URL || window.webkitURL;

    var Orientation

    var rotate_num

    var blobURL;

    if (URL) {

        $inputImage.change(function () {

            var files = this.files;

            var file;

            if (files && files.length) {

                file = files[0];

                if (/^image\/\w+$/.test(file.type)) {

                    blobURL = URL.createObjectURL(file);

                    $image.attr("src",blobURL)

                    EXIF.getData(file, function() {

                        EXIF.getAllTags(this);

                        Orientation = EXIF.getTag(this, 'Orientation');

                    });

                    $image.one('built.cropper', function () {

                        // Revoke when load complete

                        URL.revokeObjectURL(blobURL);

                    }).cropper('reset', true).cropper('replace', blobURL);

                    $inputImage.val('');

                } else {

                    window.alert('Please choose an image file.');

                }

            }

        });

    } else {

        $inputImage.prop('disabled', true).parent().addClass('disabled');

    }

    $('#up-btn-ok').on('click',function(){

        var img_src=$image.attr("src");

        if(img_src==""){

            $('#my-alert').modal('open');

            return false;

        }

        var url=$(this).attr("url");

        var canvas=$("#image").cropper('getCroppedCanvas');

        var cv_img = document.createElement("canvas");

        var ctx = cv_img.getContext("2d");

        var x = canvas.width/2;

        var y = canvas.height/2;

        cv_img.width =canvas.width;

        cv_img.height =canvas.width;

        ctx.clearRect(0,0, canvas.width, canvas.height);//先清掉画布上的内容

        ctx.translate(x,y);//将绘图原点移到画布中点

        if(Orientation == 6) {

            ctx.rotate(Math.PI/2);

        } else if(Orientation == 3) {

            ctx.rotate(-Math.PI/2);

        } else if(Orientation == 8) {

            ctx.rotate(Math.PI/1);

        }

        ctx.translate(-x,-y);//将画布原点移动

        ctx.drawImage(canvas,0,0);

        var data=cv_img.toDataURL("image/jpeg");

        $("#pic_img").attr("src",data)

        $('#new_pic').val($("#pic_img").attr("src"));

        $('#doc-modal-1').modal('close');

    });

});

function rotateimgright() {

    $("#image").cropper('rotate', 90);

}

function rotateimgleft() {

    $("#image").cropper('rotate', -90);

}

function set_alert_info(content){

    $("#alert_content").html(content);

}

“cropper.js+exif.js怎样实现头像上传的基本编辑操作”的内容就介绍到这里了,感谢大家的阅读。

(编辑:银川站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章