首页前端开发HTMLHTML5和JS实现本地图片裁剪并上传功能

HTML5和JS实现本地图片裁剪并上传功能

时间2024-01-23 12:35:22发布访客分类HTML浏览804
导读：收集整理的这篇文章主要介绍了HTML5和JS实现本地图片裁剪并上传功能，觉得挺不错的，现在分享给大家，也给大家做个参考。这篇文章主要为大家详细介绍了HTML5本地图片裁剪并上传的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下最近...
收集整理的这篇文章主要介绍了HTML5和JS实现本地图片裁剪并上传功能，觉得挺不错的，现在分享给大家，也给大家做个参考。这篇文章主要为大家详细介绍了HTML5本地图片裁剪并上传的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

p class="m-warp" id="warp">
      p class="ITem">
       input tyPE="file" name="img" id="img" hidden>
       label for="img">
    选择图片/label>
      /p>
      p class="item clearfix">
       p class="col col-1">
        p class="preview" id="preview">
         p class="mask">
    /p>
         canvas class="CVSMove" id="cvsMove">
    /canvas>
        /p>
       /p>
       p class="thum col-2 col">
        p>
    预览/p>
        img src="" id="thum">
        p class="f-text-l f-marTop-20">
         button class="shear" id="submit">
    确定/button>
        /p>
       /p>
      /p>
     /p>

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;
 }
     //判断操作区域示范存在 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

/** * 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,me,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 id="preImg">
    '));
 }
     img = preView.find('#preImg');
 //确保图片加载完成后再执行回调 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

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;
}
    ;
/** * 显示出canvas */Shear.prototype.showCanvas = function () {
     var preImg,h,w,me,cvsH,cvsW,rateH,rateW,naturalH,naturalW,preview;
     me = this;
     preImg = this.previewBox.find('#preImg');
     preview = this.previewBox.find('#preview');
     naturalH = preImg[0].naturalHeight;
     naturalW = preImg[0].naturalWidth;
     //将canvas显示出来 this.cvsMove.show();
 //将canvas置于（0,0） this.cvsMove  .css({
   "left":'0',   'top':'0'  }
    );
     h = preImg.height();
     w = preImg.width();
 //规定裁剪出的图片尺寸为200px*200px //要保证裁剪的图片不变形 if(h  this.maxH || w  this.maxW){
      this.cvsMove[0].width = cvsW = Math.min(h,w);
      this.cvsMove[0].height = cvsH = Math.min(h,w);
 }
else{
      this.cvsMove[0].width= cvsW = this.maxW;
      this.cvsMove[0].height= cvsH = this.maxH;
 }
     rateH = h/naturalH;
     rateW = w/naturalW;
     this.__drawImg(preImg,0,0,cvsW/rateW,cvsH/rateH,0,0,cvsW,cvsH);
 //使用jquery-ui中的功能使canvas可以移动 this.cvsMove.Draggable(  {
   containment: "parent",   drag:function (event,ui) {
        var left,top;
        left = ui.position.left;
        top = ui.position.top;
        //canvas每次移动都有从新绘制图案    me.__drawImg(preImg,left/rateW,top/rateH,cvsW/rateW,cvsH/rateH,0,0,cvsW,cvsH);
   }
  }
 )}
    ;
/** * 在canvas上显示图片 * @param myImg 要显示的图片节点 * @param sx 图片的起点在原图片上的x坐标 * @param sy 图片的起点在原图上的y坐标 * @param sW 在原图上的宽度 * @param sH 在原图上的高度 * @param dx 起点在canvas上的x坐标 * @param dy 起点在canvas上的y坐标 * @param dW 在canvas上的宽度 * @param dH 在canvas上的高度 * @private */Shear.prototype.__drawImg = function (myImg,sx,sy,sW,sH,dx,dy,dW,dH) {
     var cxt,thum,me;
     me = this;
     cxt = this.cvsMove[0].getContext('2d');
     cxt.drawImage(myImg[0],sx,sy,sW,sH,dx,dy,dW,dH);
     thum = this.thum;
 //将canvas上的图案显示到右侧 thum  .attr('src',this.cvsMove[0].toDataURL(me.fileType,1))  .width(this.maxW)  .height(this.maxH)}
    ;
    var shear = new Shear();
    module.exports = shear;

ajax.js

var $ = require('jquery');
function Ajax() {
}
/** * 上传图片数据 */Ajax.prototype.upload = function (data) {
 $.ajax({
  type:'POST',  data:data,  dataType:'json',  url:'/test/PHP/upload.php',  success:function (result) {
   if(result.status){
        location.reload();
   }
else{
        alert(result.msg);
   }
  }
 }
    );
}
    ;
    var ajax = new Ajax();
    module.exports = ajax;

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

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

webpack的配置文件如下：

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代码

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]));
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

使用HTML5实现网页音乐播放器

ExPress使用html模板的代码分析

以上就是HTML5和JS实现本地图片裁剪并上传功能的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

上一篇: HTML5的Canvas实现绘制曲线的方法下一篇:使用HTML5实现网页音乐播放器猜你在找的html5相关文章 关于移动端h5开发相关内容总结2022-05-17html5教程-学表单的第二天2018-12-10html5教程-HTML5浏览器支持2018-12-10html5教程-HTML5智能表单2018-12-10html5教程-微信H5使用resLoader实现加载页效果2018-12-10html5教程-day01-初级-JS0-热身运动JS入门教程2018-12-10html5教程-html5shiv.js和respond.min.js2018-12-10html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性2018-12-10html5教程-使用Html5实现手风琴案例2018-12-10html5教程-html5笔记2018-12-10 其他相关热搜词更多phpjavapython程序员load

若转载请注明出处： HTML5和JS实现本地图片裁剪并上传功能
本文地址： https://pptw.com/jishu/584203.html
html5实现兼容各大浏览器的播放器的解析 前端HTML5的几种存储方式

游客 回复需填写必要信息
↑