移动端照片上传、头像裁剪完整功能，兼容iphone,android (一)-优快云博客

本文详细介绍了一种实现图片上传并使用Cropper.js插件进行裁剪的方法。具体步骤包括：通过HTML表单上传图片，利用JavaScript判断图片格式正确后显示预览，再通过Cropper.js初始化裁剪功能，最后提供了两种方式保存裁剪后的图片，一种为直接获取Base64字符串，另一种则是将Base64转换为Blob再转换为File对象以便上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：照片上传

<input class="js_upFile" type="file" name="cover" accept="image/*" capture="camera" multiple/>

// 获取浏览器的userAgent

var agent=navigator.userAgent.toLowerCase();

var  isIos=(agent.indexOf('iphone') != -1) || (agent.indexOf('ipad') !=-1);

if(isIos)

{

  $(".js_upFile").removeAttr("capture");   //在苹果上，只要有capture="camera"，它就只打开照相机，其他情况下，相册，相机都会有

}

第二步：展示上传的图片及初始化裁剪功能

$(".js_upFile").change(function(e){

    if(test(this.value)==false)
    {
        alert('格式错误！');
        return;
    }
   
    var objUrl = getObjectURL(this.files[0]);
    if (objUrl)
    {
        //预览图片
        $("#image").attr("src",objUrl);
       //初始化裁剪插件，cropper
        var cropperImage = document.getElementById('image');
         cropper = new Cropper(cropperImage, {
            dragMode: 'move',
            aspectRatio: 1,
            viewMode: 1,
            restore: false,
            guides: false,
            center: false,
            highlight: false,
            cropBoxMovable: false,
            cropBoxResizable: false,
            toggleDragModeOnDblclick: false,
            crop: function(e) {

            }
        });
    }
});
//创建一个可存取file的url
function getObjectURL(file) {
    var url = null ;
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}
//图片格式
function test(value)
{
    var regexp=new RegExp("(.JPEG|.jpeg|.JPG|.jpg|.PNG|.png)$",'g');
    return regexp.test(value);
}

第三步：裁剪完成，获取图片

// 确认裁剪，保存图片
$(".sure").click(function(){
     // 这里获取到的是base64，如果保存base64到服务器，直接用此值
    var data_src=cropper.getCroppedCanvas().toDataURL('image/png');
     //销毁
    cropper.destroy();
    $("#image").attr("src","");
});

 // 一般情况下，上传文件比传base64要好，理由：大文件上传会因为网络问题导致不稳
 //定， 所以，一般上传大小有限制，而base64体积都会增大，尤其大图片（此处给我公司 
 //CTO来个掌声（虽然你不知道他是谁），很有技术追求）
  $(".sure").click(function(){
       var ImageURL=cropper.getCroppedCanvas().toDataURL('image/png');
       var block = ImageURL.split(";");
       var contentType = block[0].split(":")[1];
       var realData = block[1].split(",")[1];
        // base64转blob
       var blob = b64toBlob(realData, contentType);
        // blob转file
       var newFile= new File([blob], "filename.png",{type:contentType})
        //  此处调用plupload进行上传，省略了初始化代码，看者自己搜用法
        uploader.addFile(newFile);
        uploader.start();
         //销毁
        cropper.destroy();
        $("#image").attr("src","");
    });
    // blob相关知识查看我的博文：https://www.cnblogs.com/lichunyan/p/9187286.html
    function b64toBlob(b64Data, contentType, sliceSize) {
        contentType = contentType || '';
        sliceSize = sliceSize || 512;
        var byteCharacters = atob(b64Data);
        var byteArrays = [];
        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);
            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }
            var byteArray = new Uint8Array(byteNumbers);
            byteArrays.push(byteArray);
        }
        var blob = new Blob(byteArrays, {type: contentType});
        return blob;
    }        
    //