基于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。

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

1.HTML代码

rush:xhtml;">

<div class="thum col-2 col">

预览

2.CSS代码

rush:css;"> .clearfix:after{ content: ""; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden; } img{   vertical-align: middle;   max-width:100% } .m-warp{ width: 800px; } .item{ margin-top: 20px; } .col{ float: left; } .col-1{ position: relative; width: 450px; height: 450px; outline: 1px solid #333; } .preview{ display: inline-block; } .col-2{ width: 300px; margin-left: 50px; } label{ display: block; text-align: center; width: 100px; font-size: 16px; color: #fff; background-color: #888888; height: 30px; line-height: 30px; } .mask{ position: absolute; z-index: 1; top:0; left: 0; bottom: 0; right: 0; background-color: rgba(0,.4); } .cvsMove{ position: absolute; z-index: 2; outline: 2px dotted #333; cursor: move; display: none; }

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

3.js代码

customerImg.js

rush:js;"> var $ = require('jquery'); var ajax = require('./ajax.js'); var preview = require('./preview.js'); var shear = require('./shear.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'); //确定 warp .find('#submit') .unbind('click') .on('click',me.__submit.bind(me)); }; /** * 提交 * @private */ CustomerImg.prototype.__submit = function () { var cvsMove,data,fd; cvsMove = this.previewBox.find('#cvsMove'); data = cvsMove[0].toDataURL('image/jpg',1); fd = { 'customerImg':data }; ajax.upload(fd); }; /** * 判断是否支持自定义头像 * @returns {boolean} * @private */ CustomerImg.prototype.__isSupport = function () { var canvas,context; canvas= document.createElement('canvas'); if(typeof FileReader === 'function'&& canvas.getContext && canvas.toDataURL){ return true; }else{ return false; } }; var customerImg = new CustomerImg(); module.exports = customerImg;

preview.js

rush:js;"> /** * Created by star on 2017/3/7. */ var $ = require('jquery'); /** * 预览类 * @constructor */ function Preview() { this.BoxElem = null; this.callback = null; this.type = null; } /** * 入口 * @param BoxElem 操作区域 * @param callback 预览结束的回调函数 */ Preview.prototype.start = function (BoxElem,callback) { var chooseFile,me; me = this; if(! BoxElem || BoxElem.length <= 0) return this; this.BoxElem = BoxElem; if(typeof callback === 'function'){ this.callback = callback; } if(this.__isSupport()){ chooseFile = BoxElem.find('input[type="file"]'); chooseFile .on('change',me.fileChange.bind(me)) } }; /** * 选择图片的事件处理程序 * @param event */ Preview.prototype.fileChange = function (event) { var target,reader,file,type; target = event.target; me = this; file = target.files[0]; type = file.type; this.type = type; if(type !== 'image/png' && type !== 'image/jpg' && type !== 'image/jpeg'){ alert('文件格式不正确'); return this; } reader = new FileReader(); if(file){ reader.readAsDataURL(file); } reader.onload = function () { me.show(reader); } }; /** * 显示从本地选择的图片 * @param reader fileReader对象 */ Preview.prototype.show = function (reader) { var preView,img,me; preView = this.BoxElem.find('#preview'); img = preView.find('#preImg'); me = this; if(img.length <= 0){ preView.append($('图片加载完成后再执行回调 img.on('load',function () { if(me.callback){ me.callback(me.type); } }); img.attr('src',reader.result); }; /** * 是否支持预览 * @returns {boolean} * @private */ Preview.prototype.__isSupport = function () { return typeof FileReader === 'function'; }; var preview = new Preview(); module.exports = preview;

shear.js

rush:js;"> var $ = require('jquery'); //由于要使用jquery-ui,所以将$暴露到window上。 window.$ = $; require('./jquery-ui.min.js'); /** * 切割 * @constructor */ function Shear() { this.previewBox = null; this.cvsMove = null; this.maxW = 200; this.maxH = 200; this.thum = null; this.fileType = 'image/jpeg'; } /** * 入口 * @param previewBox 预览元素的父元素 * @param fileType 裁剪的图片的类型 如:'image/jpg' * @returns {Shear} */ Shear.prototype.start = function (previewBox,fileType) { if(!arguments.length) return this; var me = this; this.previewBox = previewBox; if(fileType){ this.fileType = fileType; } this.thum = this.previewBox.find('#thum'); this.cvsMove = this.previewBox.find('#cvsMove'); this.showCanvas(); return this;

};
/**

ajax.js

rush:js;"> var $ = require('jquery'); function Ajax() {

}
/**

最后在另一个文件中,调用customerImg对象的start方法

rush:js;"> var $ = require('jquery'); var customerImg =require('./customerImg.js'); customerImg.start($('#warp'));

webpack的配置文件如下:

rush:js;"> var webpack = require('webpack'); module.exports = { entry:{ 'customerImg':'./js/test.js','jQuery':['jquery'] },output:{ filename:'[name].js',library:'jQuery',libraryTarget:'umd' },plugins:[ new webpack.optimize.CommonsChunkPlugin({ name:'jQuery',filename:'jquery.js' }) ] };

效果

4.PHP代码

rush:PHP;"> if(!empty($_POST) && isset($_POST['customerImg'])){ $img = $_POST['customerImg']; $imgdata = explode(',',$img); $uniName = md5 ( uniqid ( microtime ( true ),true ) ); $a = file_put_contents('./../uploads/'.$uniName.'.jpg',base64_decode($imgdata[1])); }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...