使用HTML5在浏览器端裁剪图片

admin 发表于 [Javascript] 分类,标签: HTML5 Javascript Web前端
0
// =======================
// 函数定义
// =======================

function dataURLToBlob(dataURL){
    // dataURL 的格式为 “data:image/png;base64,****”
    var p=dataURL.indexOf(':');
    if(p<=0)return null;
    dataURL=dataURL.substring(p+1);
    p=dataURL.indexOf(';');
    if(p<=0)return null;
    var mime=dataURL.substring(0,p);
    dataURL=dataURL.substring(p+1);
    p=dataURL.indexOf(',');
    if(p<=0)return null;
    var data=dataURL.substring(p+1);
    data=window.atob(data);
    var ia = new Uint8Array(data.length);
    for (var i = 0; i < data.length; i++) {
        ia[i] = data.charCodeAt(i);
    };
    var blob=new Blob([ia], {type:mime});
    return blob;
}

//裁剪图片
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字符串
    }
}

var post=function(dataURL){
    var data = new FormData();
    data.append('upload_file', dataURLToBlob(dataURL), $('#upload-file').data('filename'));
    $.ajax({
        url:window.POST_URL,
        type:'POST',
        data:data,
        cache:false,
        contentType:false,
        processData:false,
        dataType:'json',
        success:function(r){
            if(r.status==0){
                alert(r.error);
                return;
            }
            //window.location.reload();
        },
        error:function(){}
    });
};

// ===============================
// 实施代码
// ===============================

//初始化
var $image = $('.img-container > img');
$image.cropper({
    aspectRatio: 1 / 1,// 1:1的比例进行裁剪,可以是任意比例,自己调整
    autoCropArea: 0.8,
    strict: true,
    guides: false,
    center: true,
    highlight: false,
    dragCrop:true,
    cropBoxMovable: false,
    cropBoxResizable: false,
    zoom: -0.2,
    checkImageOrigin: true,
    background:false,
    minCropBoxWidth: 200,
    minCropBoxHeight: 200,
    minContainerWidth: 250,
    minContainerHeight: 250
});

//选择图片
$('#upload-file').on('change', function () {
    var fileReader = new FileReader(),
        files = this.files, file;
    if (!files.length) {
        return;
    }
    $(this).data('filename',$(this).val());
    file = files[0];
    if (/^image\/\w+$/.test(file.type)) {
        fileReader.readAsDataURL(file);
        fileReader.onload = function () {
            $image.cropper("reset", false).cropper("replace", this.result);
            $('#upload-file').val("");
            $(".infoForm .group-input").hide();
            $(".infoForm,.picBg").show();
            $(".infoForm .addPhoto").show();
            $(".infoForm button.submit").addClass("btnCrop");//标记编辑头像按钮
        }
    }
});
var src = $image.eq(0).attr("src");
var canvasdata = $image.cropper("getCanvasData");
var cropBoxData = $image.cropper('getCropBoxData');
convertToData(src, canvasdata, cropBoxData, function(basechar) { // 回调后的函数处理
      $(".infoIntro .info img").attr("src", basechar);
      post(basechar);
});

发表我的评论