HTML5技术

HTML5本地图片裁剪并上传 - QxQstar

字号+ 作者:H5之家 来源:H5之家 2017-03-25 14:00 我要评论( )

最近做了一个项目,这个项目中需要实现的一个功能是:用户自定义头像(用户在本地选择一张图片,在本地将图片裁剪成满足系统要求尺寸的大小)。这个功能的需求是:头像最初剪切为一个正方形。如果选择的图片小于规定的头像要求尺寸,那么这整张图片都会作为

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

要完成上述功能,涉及到的知识有: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代码

选择图片预览确定

2.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,0,0,.4); } .cvsMove{ position: absolute; z-index: 2; outline: 2px dotted #333; cursor: move; display: none; }

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

3.js代码 customerImg.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 = $('<p>你的浏览器不支持自定义头像,可更换高版本的浏览器自定义头像</p>'); $('body').html(info); return this; } (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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Html5游戏框架createJS组件--EaselJS - 叶超Luka

    Html5游戏框架createJS组件--EaselJS - 叶超Luka

    2017-03-22 12:01

  • HTML5学习笔记 - 小僵尸

    HTML5学习笔记 - 小僵尸

    2017-03-22 12:00

  • html5新增标签 - 家住三十三重天外

    html5新增标签 - 家住三十三重天外

    2017-03-22 11:01

  • HTML5学习笔记一: 认识H5 - 南心芭比

    HTML5学习笔记一: 认识H5 - 南心芭比

    2017-03-16 12:00

网友点评