html上传图片裁剪,基于HTML5+JS实现本地图片裁剪并上传功能

基于HTML5+JS实现本地图片裁剪并上传功能

2019-01-07

编程之家

https://www.jb51.cc

编程之家收集整理的这篇文章主要介绍了基于HTML5+JS实现本地图片裁剪并上传功能，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

最近做了一个项目，这个项目中需要实现的一个功能是：用户自定义头像(用户在本地选择一张图片，在本地将图片裁剪成满足系统要求尺寸的大小)。这个功能的需求是：头像最初剪切为一个正方形。如果选择的图片小于规定的头像要求尺寸，那么这整张图片都会作为头像。如果大于规定的尺寸，那么用户可以选择要裁剪的区域。用户点击确定按钮，就将裁剪得到的图片数据发送到服务器，在后端将图片数据保存成一个文件。

要完成上述功能，涉及到的知识有：ajax，canvas和html5中的files接口。我将实现这个功能的代码封装到了4个模块中，分别是ajax.js，preview.js，shear.js和customerImg.js。

ajax.js:用于发送ajax请求。

preview.js:用于图片预览

shear.js：用于裁剪图片

customer.js:自定义头像。在这个模块中药引入ajax.js，preview.js和shear.js

我使用webpack进行打包。我还使用了jquery和jquery-ui。

我从这个项目中抽离出了这个功能。下面是这个功能的详细代码。

图片

预览

2.CSS代码

有了css和html的运行结果如下：

3.js代码

customerImg.js

自定义头像

* @constructor

*/

function CustomerImg() {

this.isSupport = null;

this.previewBox = null;

this.warp = null;

}

/**

* 入口

* @param warp 操作区域 jquery节点

*/

CustomerImg.prototype.start = function (warp) {

var info,me,warpBox;

me = this;

this.isSupport = this.__isSupport();

if(!this.isSupport) {

info = $('

你的浏览器不支持自定义头像，可更换高版本的浏览器自定义头像');

$('body').html(info);

return this;

}

//判断操作区域示范存在

if(warp && warp.length > 0){

this.warp = warp;

}else{

return this;

}

//预览

preview.start(warp,shear.start.bind(shear,warp));

this.previewBox = warp.find('#preview');

//确定