jquery基于cropbox实现头像的缩放、裁剪、上传功能

最新推荐文章于 2024-05-09 09:33:27 发布

抗压的人i

最新推荐文章于 2024-05-09 09:33:27 发布

阅读量574

点赞数

分类专栏：前端文章标签：头像上传图片裁剪 jq

本文链接：https://blog.csdn.net/qq_39565575/article/details/103386085

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

cropbox实现头像的缩放、裁剪、上传功能

功能点介绍：

点击加号或者减号可以缩放图片
滑动鼠标滚轮可以缩放图片
点击保存按钮可以保存圆圈内范围的图片（通常用来头像上传）

先上图，缩放前如图所示：
在这里插入图片描述
先上图，缩放后如图所示：

这里有一个网上的demo链接，我也是按照这个自己改的。
https://www.html5tricks.com/demo/jquery-avatar-cut/index.html
原文我找不到了，但是我保存了样例代码，链接如下：
链接：https://pan.baidu.com/s/1KneWB60RJDhF8F9PzOvA7A 提取码：fnjr

因为我之前找资料的时候，我发现网上关于cropbox的资料，并没有介绍关于图片边界的问题，也就是图片可以无限制的缩小可以无限制的扩大，然后移动图片的时候可以超出裁剪边界，效果如下图所示：

在这里插入图片描述

这样在某些场景下面肯定是不符合要求的，然后通过解析cropbox.js的代码，一步步的调试，计算出了图片的边界，缩小图片的最小值，最大值也OK，道理是一样的。
贴出cropbox的代码：

/**
 * Created by ezgoing on 14/9/2014.
 */

"use strict";
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(jQuery);
    }
}(function ($) {
    var cropbox = function(options, el){
        var el = el || $(options.imageBox),
            obj =
            {
                state : {},
                ratio : 1,
                options : options,
                imageBox : el,
                thumbBox : el.find(options.thumbBox),
                // spinner : el.find(options.spinner),
                image : new Image(),
                getDataURL: function ()
                {
                    var width = this.thumbBox.width(),
                        height = this.thumbBox.height(),
                        canvas = document.createElement("canvas"),
                        dim = el.css('background-position').split(' '),
                        size = el.css('background-size').split(' '),
                        dx = parseInt(dim[0]) - el.width()/2 + width/2,
                        dy = parseInt(dim[1]) - el.height()/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 ()
                {   
                    var w =  parseInt(obj.image.width)*obj.ratio;
                    var h =  parseInt(obj.image.height)*obj.ratio;
                    if(w < 150 || h < 150){
                        obj.ratio*=1
                    }else{
                        obj.ratio*=0.9
                    } 
                    setBackground();
                }
            },
            setBackground = function()
            {
                var w =  parseInt(obj.image.width)*obj.ratio;
                var h =  parseInt(obj.image.height)*obj.ratio;
                
                var imageBoxWidth = el.width();
                var imageBoxHeight = el.height();
                var pw = (imageBoxWidth - w) / 2;
                var ph = (imageBoxHeight - h) / 2;
                
                if(w < 150){
                    w = 150;
                    pw = 25;
                    ph = 25;
                }
                if(h < 150){
                    h = 150;
                    pw = 25;
                    ph = 25;
                }
                el.css({
                    '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)
            {
                e.stopImmediatePropagation();

                obj.state.dragable = true;
                obj.state.mouseX = e.clientX;
                obj.state.mouseY = e.clientY;
            },
            imgMouseMove = function(e)
            {
                $('.error').css('visibility', 'hidden')
                e.stopImmediatePropagation();
                if (obj.state.dragable)
                {
                    var x = e.clientX - obj.state.mouseX;
                    var y = e.clientY - obj.state.mouseY;

                    var imgwh = el.css('background-size').split(' ');
                    var bg = el.css('background-position').split(' ');

                    var imgWidth =  parseInt(imgwh[0]);
                    var imgHeight =  parseInt(imgwh[1]);

                    var ydiff = imgHeight - 150;
                    var xdiff = imgWidth - 150;

                    var ydiffMin = 25 - ydiff;
                    var xdiffMin = 25 - xdiff;

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

                    if(bgX > 25 || bgX < xdiffMin){
                        bgX = parseInt(bg[0]);
                    }

                    if(bgY > 25 || bgY < ydiffMin){
                        bgY = parseInt(bg[1]);
                    }

                    el.css('background-position', bgX +'px ' + bgY + 'px');

                    obj.state.mouseX = e.clientX;
                    obj.state.mouseY = e.clientY;
                }
                
            },
            imgMouseUp = function(e)
            {
                e.stopImmediatePropagation();
                obj.state.dragable = false;
            },
            zoomImage = function(e)
            {
                var w =  parseInt(obj.image.width)*obj.ratio;
                var h =  parseInt(obj.image.height)*obj.ratio;
                //IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
                //FF浏览器使用的是detail,其值为“正负3”
                if(e.originalEvent.wheelDelta > 0|| e.originalEvent.detail < 0){
                    obj.ratio*=1.1
                }else{
                    if(w < 150 || h < 150){
                        obj.ratio*=1
                    }else{
                        obj.ratio*=0.9
                    } 
                }
                // e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0 ? obj.ratio*=1.1 : obj.ratio*=0.9;
                setBackground();
                return false
            }

        // obj.spinner.show();
        obj.image.onload = function() {
            // obj.spinner.hide();
            setBackground();

            el.bind('mousedown', imgMouseDown);
            el.bind('mousemove', imgMouseMove);
            $(window).bind('mouseup', imgMouseUp);
            el.bind('mousewheel DOMMouseScroll', zoomImage);
        };
        obj.image.src = options.imgSrc;
        el.on('remove', function(){$(window).unbind('mouseup', imgMouseUp)});

        return obj;
    };

    jQuery.fn.cropbox = function(options){
        return new cropbox(options, this);
    };
}));

这是我根据业务通过计算改造过的代码。主要是这部分代码

imgMouseMove = function(e)
            {
                $('.error').css('visibility', 'hidden')
                e.stopImmediatePropagation();
                if (obj.state.dragable)
                {
                    var x = e.clientX - obj.state.mouseX;
                    var y = e.clientY - obj.state.mouseY;

                    var imgwh = el.css('background-size').split(' ');
                    var bg = el.css('background-position').split(' ');

                    var imgWidth =  parseInt(imgwh[0]);
                    var imgHeight =  parseInt(imgwh[1]);

                    var ydiff = imgHeight - 150;
                    var xdiff = imgWidth - 150;

                    var ydiffMin = 25 - ydiff;
                    var xdiffMin = 25 - xdiff;

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

                    if(bgX > 25 || bgX < xdiffMin){
                        bgX = parseInt(bg[0]);
                    }

                    if(bgY > 25 || bgY < ydiffMin){
                        bgY = parseInt(bg[1]);
                    }

                    el.css('background-position', bgX +'px ' + bgY + 'px');

                    obj.state.mouseX = e.clientX;
                    obj.state.mouseY = e.clientY;
                }
                
            },

上面的代码是移动图片的时候，限制了移动的最大和最小边界，这样图片就不会超出裁剪的范围。
思路是这样的：

这是我们最开始的需求，要求最终截取半径为75px的图片上传。
从图中可以看到，一共有三层。
第一层是长宽为200px的正方形边框称为imageBox
第二层是实际图片称为image
第三层是圆形裁剪边框的大小称为thumbBox

从图片里可以获取到一些信息
imageBox长宽我们是知道的为200px
thumbBox到imageBox的距离是固定的为25px
thumbBox的半径是固定的为75px
在这里插入图片描述
现在推导一下移动图片的边界问题。

缩放图片的最小值为thumbBox的直径大小为150px，图片的长裤其中一个为150px的时候，那么我就把它的大小写死为150px。最大值同理。

补充一下，因为最终保存的数据为Base64码，在网络传输中可能遇到文本长度限制，这里我把它转换回了file。

					//这里的img就是base64码
					var arr = img.split(','), 
                    mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, 
                    u8arr = new Uint8Array(n);

            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            
            var imageFile = new File([u8arr], 'image.png', {type:mime});
            var formData = new FormData();
            formData.append("file", imageFile);
            //然后用ajax提交一下就可以了

抗压的人i

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery基于cropbox实现头像的缩放、裁剪、上传功能

cropbox实现头像的缩放、裁剪、上传功能功能点介绍：点击加号或者减号可以缩放图片滑动鼠标滚轮可以缩放图片点击保存按钮可以保存圆圈内范围的图片（通常用来头像上传）先上图，缩放前如图所示：先上图，缩放后如图所示：这里有一个网上的demo链接，我也是按照这个自己改的。https://www.html5tricks.com/demo/jquery-avatar-cut/inde...
复制链接

扫一扫

专栏目录