一聚教程网:一个值得你收藏的教程网站

热门教程

使用jquery的imagecropper插件做用户头像上传 兼容移动端

时间:2022-06-25 17:34:31 编辑:袖梨 来源:一聚教程网

在移动端开发的过程中,或许会遇到对图片裁剪的问题。当然遇到问题问题,不管你想什么方法都是要进行解决的,哪怕是丑点,难看点,都得去解决掉。

图片裁剪的jquery插件有很多,我也测试过很多,不过大多数都是支持pc端的图片裁剪,而支持移动端图片裁剪的少,很流畅的可能就会更少了。

作为一个新手,我尝试了很多种解决方法,在初始的时候尝试自己写一个jquery插件支持触屏事件等,写出来了,但是觉得都不好意思拿出手,更别说拿出来商用了。

又尝试找了一些插件,一个个试。最后综合评价,感觉还不错的jquery插件:cropper这个jquery创建。

看了一下感觉还是挺简单的。demo:http://fengyuanchen.github.io/cropper/

下面就是我使用过程的一些代码,希望能对大家有所帮助。

插件导入:

css/delimg/cropper.css"/> 
 
 

必要的一点html代码:

 
     
 

注意:一般情况下,图片会动态生成,所以当前的src值,为空。如果你是静态图片进行图片截取,那就更简单了。看下面代码就懂了。

插件的使用(很简单):

var $image = $('.img-container > img'); 
      
$image.attr("src", imgurl);     
 
$image.on("load", function() {        // 等待图片加载成功后,才进行图片的裁剪功能 
    $image.cropper({ 
        aspectRatio: 1 / 1  // 1:1的比例进行裁剪,可以是任意比例,自己调整 
    }); 
}) 

现在只是做了一个框架,最主要的是下面的代码,获取到图片的数据才是最主要的,所以我们需要利用到canvas的特异功能,将图片裁剪的部分转化为base64的字符串进行前后端数据的交互。

然而,cropper并不会给你提供现成的base64字符串,但是他给你了一串的数据对象,供你自己任意发挥。

点击某个按钮时,确定剪裁这一高亮的部分:

$(selector).on("tap", function() { 
    var src = $image.eq(0).attr("src"); 
    var canvasdata = $image.cropper("getCanvasData"); 
    var cropBoxData = $image.cropper('getCropBoxData'); 
     
    convertToData(src, canvasdata, cropBoxData, function(basechar) { 
        // 回调后的函数处理         
    }); 
}) 

当然这也不是重点,重点是下面这个函数处理:

function convertToData(url, canvasdata, cropdata, callback) { 
    var cropw = cropdata.width; // 剪切的宽 
    var croph = cropdata.height; // 剪切的宽 
    var imgw = canvasdata.width; // 图片缩放或则放大后的高 
    var imgh = canvasdata.height; // 图片缩放或则放大后的高 
     
    var poleft = canvasdata.left - cropdata.left; // canvas定位图片的左边位置 
    var potop = canvasdata.top - cropdata.top; // canvas定位图片的上边位置 
     
    var canvas = document.createElement("canvas"); 
    var ctx = canvas.getContext('2d'); 
     
    canvas.width = cropw; 
    canvas.height = croph; 
     
    var img = new Image(); 
    img.src = url; 
     
    img.onload = function() { 
        this.width = imgw; 
        this.height = imgh; 
            // 这里主要是懂得canvas与图片的裁剪之间的关系位置 
        ctx.drawImage(this, poleft, potop, this.width, this.height); 
        var base64 = canvas.toDataURL('image/jpg', 1);  // 这里的“1”是指的是处理图片的清晰度(0-1)之间,当然越小图片越模糊,处理后的图片大小也就越小 
        callback && callback(base64)      // 回调base64字符串 
    } 

好啦,就到这里了,该处理的东西都处理了,当然这里一个放大缩小的正向处理剪裁,如果需要对图片的旋转等一些列的操作的话,也是可以得,这里只是给大家展示一个简单的demo的实现,如果有用得上的,可以作为参考。

实现方案:使用jquery的imagecropper.js插件中裁剪功能来实现

imagecropper.js这个源码我找了很久才找到http://pan.baidu.com/s/1oDqRO

代码量很少就没有写注释了

css

 


html

 
   

 
        javascript:void(0);" onclick="document.getElementById('input').click();">选择 
        保存 
         
 
       
 
             
            向左旋转 
            向右旋转 
 
             
           
 
                 
                大尺寸图片,180x180像素 
 
                 
                中尺寸图片 100x100像素 
 
                 
                小尺寸图片 50x50像素 
           
 
       
 
 
   
 
 

最后是js部分了

var cropper; 
 
function init() 
{    
    //绑定 
    cropper = new ImageCropper(300, 300, 180, 180); 
    cropper.setCanvas("cropper"); 
    cropper.addPreview("preview180"); 
    cropper.addPreview("preview100"); 
    cropper.addPreview("preview50"); 
    //检测用户浏览器是否支持imagecropper插件 
    if(!cropper.isAvaiable()) 
    { 
        alert("Sorry, your browser doesn't support FileReader, please use Firefox3.6+ or Chrome10+ to run it."); 
    } 

 
//打开本地图片 
function selectImage(fileList) 

    cropper.loadImage(fileList[0]); 

 
//旋转图片 
function rotateImage(e) 

    switch(e.target.id) 
    { 
        case "rotateLeftBtn": 
            cropper.rotate(-90); 
            break; 
        case "rotateRightBtn": 
            cropper.rotate(90); 
            break; 
    } 

 
//上传图片 
function saveImage() 

    //选个你需要的大小 
    var imgData = cropper.getCroppedImageData(180, 180); 
    console.log("上传了:"+imgData); 
    //在这里写你的上传代码 

热门栏目