H5图片上传预览、裁剪功能

做项目的构成中需要本地上传图片裁剪并上传服务器，比如用户头像上传预览等其他的图片上传功能；废话不多说直接上~~

第一步：获取文件

HTML5 支持从 input[type=file] 元素中直接获取图片信息，也可以读取图片内容。我们用下面代码就可以实现：

$('input[type=file]').change(function(){
    var file = this.files[0];
});

第二部：读取文件，并生成 img元素

这一步就需要用到 FileReader 了，这个类是专门用来读取本地文件的。纯文本或者二进制都可以读取，但是本地文件必须是经过用户允许才能读取，也就是说用户要在input[type=file]中选择了这个文件，你才能读取到它。

$('input[type=file]').change(function(){
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload=function(){
        // 通过 reader.result 来访问生成的 DataURL
        var url = reader.result,
            image = new Image();
        image.src=url;
    };
    reader.readAsDataURL(file);
});

第三步：获取裁剪坐标

第四部：裁剪图片

这是时候我们就需要用到 canvas 了，canvas 和图片一样，所以新建 canvas 时就要确定其高宽。这里我们还运用到image.naturalHeight 和 image.naturalWidth 这两个属性来获取图片原始尺寸。

将图片放置入 canvas 时需要调用 drawImage。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

因为我们用 canvas 只是用于裁剪图片的，所以需要新建一个 canvas 让它的尺寸和裁剪之后图片的尺寸相等，此时canvas 就相当与我们的裁剪框。运用这个函数还可以将大图缩放成小图。

var x,  
    y,
    width,
    height;

var canvas=$('<canvas width="'+width+'" height="'+height+'"></canvas>')[0],
    ctx=canvas.getContext('2d');

ctx.drawImage(image,x,y,width,height,0,0,width,height);
$(document.body).append(canvas);

将 canvas 加入文档流之后，就可以看到裁剪后的效果了。不过我们还需要将图片上传至服务器里。

第五步：读取裁剪后的图片并上传

这时我们要获取 canvas 中图片的信息，用 toDataURL 就可以转换成上面用到的 DataURL 。然后取出其中 base64 信息，再用 window.atob 转换成由二进制字符串。但 window.atob 转换后的结果仍然是字符串，直接给 Blob 还是会出错。所以又要用 Uint8Array 转换一下。总之这里挺麻烦的。。

var data=canvas.toDataURL();

// dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
data=data.split(',')[1];
data=window.atob(data);
var ia = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
    ia[i] = data.charCodeAt(i);
};

// canvas.toDataURL 返回的默认格式就是 image/png
var blob=new Blob([ia], {type:"image/png"});

这时候裁剪后的文件就储存在 blob 里了,我们可以把它当作是普通文件一样，加入到 FormData 里，并上传至服务器了。

var fd=new FormData();

fd.append('file',blob);
$.ajax({
    url:"upload.php",
    type:"POST",
    data:fd,
    contentType: false,
    processData: false,
    cache: false,
    success:function(){}
});

然后你服务器里应该就可以收到这个文件了~

H5图片上传预览、裁剪功能

做项目的构成中需要本地上传图片裁剪并上传服务器，比如用户头像上传预览等其他的图片上传功能；废话不多说直接上~~

猜你喜欢