精华内容
下载资源
问答
  • html5手机上传图片

    2017-03-06 15:41:32
    html5手机上传图片
  • 基于vue上传的图片例子,支持传多图文件,支持拖拽上传图片,支持手机上传,pc上传。
  • js部分,需要jq <!-- 上传图片js --> function upload(){ document.getElementById('upimg').click(); } function sm(){ document.getElementById('upfile').submit(); } </s
    • js部分,需要jq
    <!-- 上传图片js -->
    <script type="text/javascript">
      function upload(){
        document.getElementById('upimg').click();
      }
      function sm(){
        document.getElementById('upfile').submit();
      }
    </script>
    • html
             <div id="top">
                 <div id="title">个人中心</div>
                  <!-- 图片提交表单 -->
                 <form id="upfile" class="" action="{:U('User/upload')}" method="post" enctype="multipart/form-data" style="display:none">
                   <input id="upimg" type="file" name="img" value="" style="display:none" onchange="sm();">
                 </form>
                 <div id="top-touxiang">
                     <div id="touxiang">
                         <div><img src="{$user_info.img}" alt="头像" onclick="upload();" style="width:14rem;height:14rem;border-radius:400px;"></div>
                         <div>{$user_info.user_tel}</div>
                     </div>
                 </div>
    
             </div>
    • PHP后台代码(tp3.2.3)
      public function upload(){
        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize   =     3145728 ;// 设置附件上传大小
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath  =      './Uploads/'; // 设置附件上传根目录
        $upload->savePath  =      'user/'; // 设置附件上传(子)目录
        // 上传文件
        $info   =   $upload->upload();
        if(!$info) {// 上传错误提示错误信息
            $this->error($upload->getError());
        }else{// 上传成功 获取上传文件信息
            foreach($info as $file){
                echo $file['savepath'].$file['savename'];
            }
        }
        $imgurl = "/yikuai/Uploads/".$file['savepath'].$file['savename'];
        $data['img']=$imgurl;
        $user=M('user');
        $map['user_tel']=session('tel');
        $user->where($map)->save($data);
        $this->redirect('User/index');
        }
    • 这里主要利用onclick()和onchange()两个函数。
    • 设置图片弧度为圆型。
    展开全文
  • web页上在android手机app里点不动上传图片按钮 web页上在android手机app里点不动上传图片按钮
  • 可以修改照片,用于网上上传,特别是考试上传照片。特好用。
  • html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度...

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。

    因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正。

    利用exif.js读取照片的拍摄信息,详见  http://code.ciaoca.com/javascript/exif-js/

    这里主要用到Orientation属性。

    Orientation属性说明如下:

    旋转角度参数
    1
    顺时针90°6
    逆时针90°8
    180°3

     

    下面就直接上代码了。

    主要有html5页面和一个js,示例功能包含了图片压缩和旋转。

    自己写的是uploadImage.js。

    html5测试页面如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>图片上传</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="js/uploadPicture/uploadImage.js" ></script>
            <script type="text/javascript" src="js/exif.js" ></script>
        <script>
     
        </script>
    </head>
    <body>
    	<div style="height: 50px; line-height: 50px;text-align: center;border-bottom: 1px solid #171E28;">
    			上传图片:
    			<input type="file" accept="image/*" id="uploadImage" capture="camera" οnchange="selectFileImage(this);" />
    		</div>
    		<div style="margin-top: 10px;">
    			<img alt="preview" src="" id="myImage"/>
    		</div>
    </body>
    </html>

    uploadImage.js如下:

    function selectFileImage(fileObj) {
    	var file = fileObj.files['0'];
    	//图片方向角 added by lzk
    	var Orientation = null;
    	
    	if (file) {
    		console.log("正在上传,请稍后...");
    		var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
    		if (!rFilter.test(file.type)) {
    			//showMyTips("请选择jpeg、png格式的图片", false);
    			return;
    		}
    		// var URL = URL || webkitURL;
    		//获取照片方向角属性,用户旋转控制
    		EXIF.getData(file, function() {
    		   // alert(EXIF.pretty(this));
    		    EXIF.getAllTags(this); 
    		    //alert(EXIF.getTag(this, 'Orientation')); 
    		    Orientation = EXIF.getTag(this, 'Orientation');
    		    //return;
    		});
    		
    		var oReader = new FileReader();
    		oReader.onload = function(e) {
    			//var blob = URL.createObjectURL(file);
    			//_compress(blob, file, basePath);
    			var image = new Image();
    			image.src = e.target.result;
    			image.onload = function() {
    				var expectWidth = this.naturalWidth;
    				var expectHeight = this.naturalHeight;
    				
    				if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
    					expectWidth = 800;
    					expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
    				} else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
    					expectHeight = 1200;
    					expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
    				}
    				var canvas = document.createElement("canvas");
    				var ctx = canvas.getContext("2d");
    				canvas.width = expectWidth;
    				canvas.height = expectHeight;
    				ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
    				var base64 = null;
    				//修复ios
    				if (navigator.userAgent.match(/iphone/i)) {
    					console.log('iphone');
    					//alert(expectWidth + ',' + expectHeight);
    					//如果方向角不为1,都需要进行旋转 added by lzk
    					if(Orientation != "" && Orientation != 1){
    						alert('旋转处理');
    						switch(Orientation){
    						 	case 6://需要顺时针(向左)90度旋转
    						 		alert('需要顺时针(向左)90度旋转');
    						 		rotateImg(this,'left',canvas);
    						 		break;
    						 	case 8://需要逆时针(向右)90度旋转
    						 		alert('需要顺时针(向右)90度旋转');
    						 		rotateImg(this,'right',canvas);
    						 		break;
    						 	case 3://需要180度旋转
    						 		alert('需要180度旋转');
    								rotateImg(this,'right',canvas);//转两次
    								rotateImg(this,'right',canvas);
    								break;
    						}		
    					}
    					
    					/*var mpImg = new MegaPixImage(image);
    					mpImg.render(canvas, {
    						maxWidth: 800,
    						maxHeight: 1200,
    						quality: 0.8,
    						orientation: 8
    					});*/
    					base64 = canvas.toDataURL("image/jpeg", 0.8);
    				}else if (navigator.userAgent.match(/Android/i)) {// 修复android
    					var encoder = new JPEGEncoder();
    					base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);
    				}else{
    					//alert(Orientation);
    					if(Orientation != "" && Orientation != 1){
    						//alert('旋转处理');
    						switch(Orientation){
    						 	case 6://需要顺时针(向左)90度旋转
    						 		alert('需要顺时针(向左)90度旋转');
    						 		rotateImg(this,'left',canvas);
    						 		break;
    						 	case 8://需要逆时针(向右)90度旋转
    						 		alert('需要顺时针(向右)90度旋转');
    						 		rotateImg(this,'right',canvas);
    						 		break;
    						 	case 3://需要180度旋转
    						 		alert('需要180度旋转');
    								rotateImg(this,'right',canvas);//转两次
    								rotateImg(this,'right',canvas);
    								break;
    						}		
    					}
    					
    					base64 = canvas.toDataURL("image/jpeg", 0.8);
    				}
    				//uploadImage(base64);
    				$("#myImage").attr("src", base64);
    			};
    		};
    		oReader.readAsDataURL(file);
    	}
    }
     
    //对图片旋转处理 added by lzk
    function rotateImg(img, direction,canvas) {  
    		//alert(img);
            //最小与最大旋转方向,图片旋转4次后回到原方向  
            var min_step = 0;  
            var max_step = 3;  
            //var img = document.getElementById(pid);  
            if (img == null)return;  
            //img的高度和宽度不能在img元素隐藏后获取,否则会出错  
            var height = img.height;  
            var width = img.width;  
            //var step = img.getAttribute('step');  
            var step = 2;  
            if (step == null) {  
                step = min_step;  
            }  
            if (direction == 'right') {  
                step++;  
                //旋转到原位置,即超过最大值  
                step > max_step && (step = min_step);  
            } else {  
                step--;  
                step < min_step && (step = max_step);  
            }  
            //img.setAttribute('step', step);  
            /*var canvas = document.getElementById('pic_' + pid);  
            if (canvas == null) {  
                img.style.display = 'none';  
                canvas = document.createElement('canvas');  
                canvas.setAttribute('id', 'pic_' + pid);  
                img.parentNode.appendChild(canvas);  
            }  */
            //旋转角度以弧度值为参数  
            var degree = step * 90 * Math.PI / 180;  
            var ctx = canvas.getContext('2d');  
            switch (step) {  
                case 0:  
                    canvas.width = width;  
                    canvas.height = height;  
                    ctx.drawImage(img, 0, 0);  
                    break;  
                case 1:  
                    canvas.width = height;  
                    canvas.height = width;  
                    ctx.rotate(degree);  
                    ctx.drawImage(img, 0, -height);  
                    break;  
                case 2:  
                    canvas.width = width;  
                    canvas.height = height;  
                    ctx.rotate(degree);  
                    ctx.drawImage(img, -width, -height);  
                    break;  
                case 3:  
                    canvas.width = height;  
                    canvas.height = width;  
                    ctx.rotate(degree);  
                    ctx.drawImage(img, -width, 0);  
                    break;  
            }  
        }  

     

    展开全文
  • JS手机端多图片上传删除代码,因multiple安卓手机中不兼容,所以安卓只能一次选中一张图片iOS系统可以实现多图片上传
  • 自己就在网上查找资料,发现是小米的获取图片路径的代码与其他的手机不一样,于是修改了代码,解决了这个问题,这里记录一下。这是onActivityResult方法中执行的,if (data == null) {return;}uri = data.getData()...

    释放双眼,带上耳机,听听看~!

    之前做了一个获取相册选择图片的功能,后来测试人员在小米的手机 测试时出现崩溃现象。自己就在网上查找资料,发现是小米的获取图片路径的代码与其他的手机不一样,于是修改了代码,解决了这个问题,这里记录一下。

    这是在onActivityResult方法中执行的,

    if (data == null) {

    return;

    }

    uri = data.getData();

    uri = geturi(data);//解决方案

    String[] proj = { MediaStore.Images.Media.DATA };

    Cursor cursor = query(uri, proj, null, null, null);

    if(cursor!=null){

    int column_index = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);

    cursor.moveToFirst();

    String path = cursor.getString(column_index);// 图片在的路径

    Intent intent3 = new Intent(this, SYClipActivity.class);

    intent3.putExtra("path", path);

    startActivityForResult(intent3, IMAGE_COMPLETE);

    }

    这里面如果不加uri = geturi(data);这个代码,在其他的手机上是没有问题的,但是在小米手机会崩溃。

    /**

    * 解决小米手机上获取图片路径为null的情况

    * @param intent

    * @return

    */

    public Uri geturi(android.content.Intent intent) {

    Uri uri = intent.getData();

    String type = intent.getType();

    if (uri.getScheme().equals("file") && (type.contains("image/"))) {

    String path = uri.getEncodedPath();

    if (path != null) {

    path = Uri.decode(path);

    ContentResolver cr = this.getContentResolver();

    StringBuffer buff = new StringBuffer();

    buff.append("(").append(Images.ImageColumns.DATA).append("=")

    .append("'" + path + "'").append(")");

    Cursor cur = cr.query(Images.Media.EXTERNAL_CONTENT_URI,

    new String[] { Images.ImageColumns._ID },

    buff.toString(), null, null);

    int index = 0;

    for (cur.moveToFirst(); !cur.isAfterLast(); cur.moveToNext()) {

    index = cur.getColumnIndex(Images.ImageColumns._ID);

    // set _id value

    index = cur.getInt(index);

    }

    if (index == 0) {

    // do nothing

    } else {

    Uri uri_temp = Uri

    .parse("content://media/external/images/media/"

    + index);

    if (uri_temp != null) {

    uri = uri_temp;

    }

    }

    }

    }

    return uri;

    }

    这里面是先判断相册返回的intent的type,如果是小米手机,则type包含(“image/”)),它的Scheme也是file。然后获取到图片的路径,然后解析路径得到图片在手机的uri的ID,通过ContentResolver查询图片的ID得到图片的URI的索引,然后返回图片的URI.这样就处理了小米手机获取图片URI的代码。其他手机直接 uri = data.getData(); 就获取到了URI.

    有点麻烦,自己都有些不懂的,大家可以去网上查找资料看看。

    android 解决小米手机上选择照片路径为null的问题就讲完了,就这么简单。

    展开全文
  • 部分是手机上上传图片时,直接上传无法上传,总是报socket连接超时,但是, 如果在上传的时候从服务器家一张图片之后就可以了,这是什么情况啊?
  • 图片资源 某天自己在网上下的 方便自己 就上传了 嘿嘿嘿嘿
  • plupload-2.1.2 js、html压缩图片上传图片神器,手机微信网页上传图片必备神器,直接微信网页压缩图片,大幅提高上传速度,空前绝后的资源
  • cropper.js 实现HTML5 裁剪图片上传(裁剪上传头像。)

    万次阅读 多人点赞 2016-07-04 19:43:38
    我的需求功能:在手机端实现上传头像,带裁剪框。 cropper.js 通过canvas实现图片裁剪,最后通过canvas获取裁剪区域的图片base64串。 cropper 文档:官方文档是全英文的,好吧我看不懂。只能一个个试试效果,就...

    ************* 注: cropper.js 版本更新至1.5.11 。****

    github上的官方cropper.js地址是     https://github.com/fengyuanchen/cropperjs

     

    新的    下载地址

    更新版本后发现监听事件不能用了,查了下监听事件改动了。如下:

    // Cropper
        $image.on({
            ready: function (e) {
                //This event fires when the target image has been loaded and the cropper instance is ready for operating.
                //百度翻译:此事件在目标图像已加载且cropper实例已准备好进行操作时激发。
                //即:在我选择完图片后执行
                console.log(e.type);
                $("#containerDiv").show();
                $("#imgEdit").show();
            },
            cropstart: function (e) {
                //操作开始
                //其中action 包含了
                /**
                 * Options:
                 'crop': create a new crop box    创建了新裁剪框
                 'move': move the canvas (image wrapper)   移动了图片
                 'zoom': zoom in / out the canvas (image wrapper) by touch.  图片 放大或缩小
                 'e': resize the east side of the crop box   裁剪框右边 调整大小
                 'w': resize the west side of the crop box   裁剪框左边 调整大小
                 's': resize the south side of the crop box   裁剪框下边 调整大小
                 'n': resize the north side of the crop box   裁剪框上边 调整大小
                 'se': resize the southeast side of the crop box   裁剪框右下角 调整大小
                 'sw': resize the southwest side of the crop box   裁剪框左下角 调整大小
                 'ne': resize the northeast side of the crop box   裁剪框右上角 调整大小
                 'nw': resize the northwest side of the crop box   裁剪框左上角 调整大小
                 'all': move the crop box (all directions)    裁剪框 整个块移动
                 */
                console.log(e.type, e.detail.action);
            },
            cropmove: function (e) {
                //操作移动中
                console.log(e.type, e.detail.action);
            },
            cropend: function (e) {
                //操作动作结束
                console.log(e.type, e.detail.action);
            },
            crop: function (e) {
                //This event fires when the canvas (image wrapper) or the crop box changed.
                //在画布(图片) 或者裁剪框变化时触发
                console.log(e.type);
            },
            zoom: function (e) {
                //This event fires when a cropper instance starts to zoom in or zoom out its canvas (image wrapper).
                //当放大或缩小时触发
                console.log(e.type, e.detail.ratio);
            }
        }).cropper(options);

     

     

    ************* 注:以下是根据cropper.js 是 0.7 版,测试的效果,   目前可能会有点问题,在目前的手机浏览器上 拖拽放大缩小图片时 会出现黑图失效   。****

      我的需求功能:在手机端实现上传头像,带裁剪框。

    cropper.js  通过canvas实现图片裁剪,最后在通过canvas获取裁剪区域的图片base64串。

    cropper 文档:官方文档是全英文的,好吧我看不懂。只能一个个试试效果,就有了下面的总结。官方文档<-点这

    1.container 容器   2.canvas 图片   3.crop  裁剪框

    option相关参数说明

     

    viewMode 显示模式

    • Type: Number
    • Default: 0
    • Options:
      • 0: the crop box is just within the container    裁剪框只能在 1内移动
      • 1: the crop box should be within the canvas   裁剪框 只能在  2图片内移动
      • 2: the canvas should not be within the container  2图片 不全部铺满1 (即缩小时可以有一边出现空隙)
      • 3: the container should be within the canvas  2图片 全部铺满1 (即 再怎么缩小也不会出现空隙)

    dragMode  拖动模式

    • Default: 'crop'
    • Options:
      • 'crop': create a new crop box  当鼠标 点击一处时根据这个点重新生成一个 裁剪框
      • 'move': move the canvas    可以拖动图片
      • 'none': do nothing  图片就不能拖动了

    Define the dragging mode of the cropper.

    toggleDragModeOnDblclick   默认true .是否允许 拖动模式 “crop” 跟“move” 的切换状态。。即当点下为crop 模式,如果未松开拖动这时就是“move”模式。放开后又为“crop”模式

    preview  截图的显示位置   型:String(jQuery选择器),默认值''
    responsive :类型:Boolean,默认值true。是否在窗口尺寸改变的时候重置cropper。

    checkImageOrigin:类型:Boolean,默认值true。默认情况下,插件会检测图片的源,如果是跨域图片,图片元素会被添加crossOrigin class,并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载,以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOrigin class会阻止在图片url上添加时间戳,及图片的重新加载。

    background:类型:Boolean,默认值true。是否在容器上显示网格背景。 要想改背景,我是直接改,cropper.css样式中的 cropper-bg

     

    canvas(图片)相关

    movable:类型:Boolean,默认值true。是否允许移动图片

    rotatable:类型:Boolean,默认值true。是否允许旋转图片。

    scalable  默认 true 。 是否允许扩展图片。(暂时不知道干嘛用)

    zoomable 默认true, 石头允许缩放图片。

    zoomOnWheel 默认 true 是否允许鼠标滚轴 缩放图片

    zoomOnTouch 默认true 是否允许触摸缩放图片(触摸屏上两手指操作。)

    wheelZoomRatio 默认0.1 师表滚轴缩放图片比例。即滚一下。图片缩放多少。如 0.1 就是图片的10%

     

    crop(裁剪框)相关

    aspectRatio 裁剪框比例  默认NaN   例如:: 1 / 1,//裁剪框比例 1:1

    modal:类型:Boolean,默认值true。是否在剪裁框上显示黑色的模态窗口。

    cropBoxMovable :默认true ,是否允许拖动裁剪框cropBoxResizable :默认 true,//是否允许拖动 改变裁剪框大小
    autoCrop:类型:Boolean,默认值true。是否允许在初始化时自动出现裁剪框。autoCropArea:类型:Number,默认值0.8(图片的80%)。0-1之间的数值,定义自动剪裁框的大小。highlight:类型:Boolean,默认值true。是否在剪裁框上显示白色的模态窗口。

    guides:类型:Boolean,默认值true。是否在剪裁框上显示虚线。

    center:  默认true  是否显示裁剪框 中间的+ 

    restore :  类型:Boolean,默认值true  是否调整窗口大小后恢复裁剪区域。

    大小相关

           minContainerWidth:类型:Number,默认值200。容器的最小宽度。

           minContainerHeight:类型:Number,默认值100。容器的最小高度。

          minCanvasWidth:类型:Number,默认值0。canvas 的最小宽度(image wrapper)。

          minCanvasHeight:类型:Number,默认值0。canvas 的最小高度(image wrapper)。

    监听触发的方法

          build:类型:Function,默认值nullbuild.cropper事件的简写方式。 ====== 。控件初始化前执行

           built:类型:Function,默认值nullbuilt.cropper事件的简写方式。  ====== 空间初始化完成后执行

          dragstart:类型:Function,默认值nulldragstart.cropper事件的简写方式。 ======  拖动开始执行

          dragmove:类型:Function,默认值nulldragmove.cropper事件的简写方式。======  拖动移动中执行

          dragend:类型:Function,默认值nulldragend.cropper事件的简写方式。======  拖动结束执行

          zoomin:类型:Function,默认值nullzoomin.cropper事件的简写方式。 ======  缩小执行

          zoomout:类型:Function,默认值nullzoomout.cropper事件的简写方式。 ======  放大执行

     

    demo 下载   分数被调高了。

     

    新下载地址点-》   demo

    html  

    <section style="margin-top: 50px;">
    		<input id="photoBtn" type="button" onclick="document.getElementById('inputImage').click()" value="选择照片"><!-- 可以增加自己的样式 -->
    		<input  id="inputImage"  type="file" accept="image/*" style="display: none;"/>
    		<br/>
      		<img  id="showImg" />
    	</section>
    
    	<div class="container" style="padding: 0;margin: 0;position:fixed;display: none;top: 0;left: 0;z-index: 200;" id="containerDiv">
    	    <div class="row" style="display: none;" id="imgEdit">
    	      <div class="col-md-9">
    	        <div class="img-container">
    	          <img src="" alt="Picture">
    	        </div>
    	      </div>
    	    </div>
    	    <div class="row" id="actions" style="padding: 0;margin: 0;width: 100%;position: fixed;bottom: 5px;">
    	      <div class="col-md-9 docs-buttons">
    	        <div class="btn-group" >
    	          <button type="button" class="btn btn-primary" data-method="destroy" title="Destroy" style="height: auto;">
    	            <span class="docs-tooltip" data-toggle="tooltip" >
    	              <span class="fa fa-power-off" >取消</span>
    	            </span>
    	          </button>
    	        </div>
    	
    	        <div class="btn-group btn-group-crop " style="float: right;">
    	          <button type="button" class="btn btn-primary" id="imgCutConfirm" data-method="getCroppedCanvas" data-option="{ "width": 320, "height": 180 }" style="height: auto;margin-right: 17px;">
    	            <span class="docs-tooltip" data-toggle="tooltip" title="">确认</span> <!--cropper.getCroppedCanvas({ width: 320, height: 180 }) -->
    	          </button>
    	        </div>
    	
    	      </div><!-- /.docs-buttons -->
    	    </div>
      	</div>
    </pre><pre name="code" class="html">

     

     使用调用cropper 截图   的js 

    var fileImg = "";
    
    </pre><pre name="code" class="html">window.onload = function () {
    
      'use strict';//表示强规则
      
      var screenWidth = $(window).width();
      var screenHeight =  $(window).height();
       
      var Cropper = window.Cropper;
      var console = window.console || { log: function () {} };
      var container = document.querySelector('.img-container');
      var image = container.getElementsByTagName('img').item(0);
      var actions = document.getElementById('actions');
      var isUndefined = function (obj) {
    	  return typeof obj === 'undefined';
      };
      var options = {
    		minContainerHeight :  screenHeight,
    		minContainerWidth : screenWidth,
            aspectRatio: 1 / 1,//裁剪框比例 1:1
            viewMode : 1,//显示
            guides :false,//裁剪框虚线 默认true有
            dragMode : "move",
            build: function (e) { //加载开始
            	//可以放你的过渡 效果
            },
            built: function (e) { //加载完成
            	$("#containerDiv").show();
                $("#imgEdit").show();
            },
            zoom: function (e) {
              console.log(e.type, e.detail.ratio);
            },
            background : true,// 容器是否显示网格背景
    		movable : true,//是否能移动图片
    		cropBoxMovable :false,//是否允许拖动裁剪框
    		cropBoxResizable :false,//是否允许拖动 改变裁剪框大小
      };
      var cropper = new Cropper(image, options);
    
    
     //禁用默认方法
      function preventDefault(e) {
        if (e) {
          if (e.preventDefault) {
            e.preventDefault();
          } else {
            e.returnValue = false;
          }
        }
      }
    
      // Tooltip
      $('[data-toggle="tooltip"]').tooltip();
    
    
      if (typeof document.createElement('cropper').style.transition === 'undefined') {
    	  $('button[data-method="rotate"]').prop('disabled', true);
    	  $('button[data-method="scale"]').prop('disabled', true);
      }
    
      // Methods
      actions.querySelector('.docs-buttons').onclick = function (event) {
        var e = event || window.event;
        var target = e.target || e.srcElement;
        var result;
        var input;
        var data;
    
        if (!cropper) {
          return;
        }
    
        while (target !== this) {
          if (target.getAttribute('data-method')) {
            break;
          }
    
          target = target.parentNode;
        }
    
        if (target === this || target.disabled || target.className.indexOf('disabled') > -1) {
          return;
        }
    
        data = {
          method: target.getAttribute('data-method'),
          target: target.getAttribute('data-target'),
          option: target.getAttribute('data-option'),
          secondOption: target.getAttribute('data-second-option')
        };
    
        if (data.method) {
          if (typeof data.target !== 'undefined') {
            input = document.querySelector(data.target);
    
            if (!target.hasAttribute('data-option') && data.target && input) {
              try {
                data.option = JSON.parse(input.value);
              } catch (e) {
                console.log(e.message);
              }
            }
          }
    
          if (data.method === 'getCroppedCanvas') {
            data.option = JSON.parse(data.option);
          }
    
          result = cropper[data.method](data.option, data.secondOption);
    
          switch (data.method) {
            case 'scaleX':
            case 'scaleY':
              target.setAttribute('data-option', -data.option);
              break;
    
            case 'getCroppedCanvas':
              if (result) {
            	  
                fileImg = result.toDataURL('image/jpg');
                $("#showImg").attr("src",fileImg).show();
                $("#photoBtn").val("重新选择");
              }
    
              break;
    
            case 'destroy':
            	$("#inputImage").val("");
            	$("#containerDiv").hide();
            	$("#imgEdit").hide();
              break;
          }
    
          if (typeof result === 'object' && result !== cropper && input) {
            try {
              input.value = JSON.stringify(result);
            } catch (e) {
              console.log(e.message);
            }
          }
    
        }
      };
    
      // Import image
      var inputImage = document.getElementById('inputImage');
      var URL = window.URL || window.webkitURL;
      var blobURL;
    
      if (URL) {
        inputImage.onchange = function () {
          var files = this.files;
          var file;
    
          if (cropper && files && files.length) {
            file = files[0];
    
            if (/^image\/\w+/.test(file.type)) {
              blobURL = URL.createObjectURL(file);
              cropper.reset().replace(blobURL);
            } else {
              window.alert('Please choose an image file.');
            }
          }
          $(inputImage).find("img").hide();
        };
      } else {
        inputImage.disabled = true;
        inputImage.parentNode.className += ' disabled';
      }
    
    };
    
    $("#imgCutConfirm").bind("click",function(){
    <span style="white-space:pre">	</span>$("#containerDiv").hide();
      <span style="white-space:pre">	</span>$("#imgEdit").hide();
    <span style="white-space:pre">	</span>$("#getCroppedCanvasModal").modal("hide");
    })
    

     

    获取截图 并ajax提交,  

     

    //提交表达
    	function submitForm(){
    		$("#registerForm").attr("enctype","multipart/form-data");
    		
    		var formData = new FormData($("#registerForm")[0]);
    		formData.append("imgBase64",encodeURIComponent(fileImg));//
    		formData.append("fileFileName","photo.jpg");
    		
    		
    		$.ajax({  
    	        url: "",
    	        type: 'POST',  
    	        data: formData,  
    	        timeout : 10000, //超时时间设置,单位毫秒
    	        async: true,  
    	        cache: false,  
    	        contentType: false,  
    	        processData: false, 
    	        success: function (result) { 
    	       	},  
    	        error: function (returndata) {
    	        }
     		});
    	}

     

    使用canvas生成的截图。我只找到生成base64的。就是那一长串字符。。

    原本我想生成jpg / png ,,没找到。  

    后来找到在后台 把base64 的转成jpg/png  的方法。

    然后又把图片上传到七牛上面,发现可以使用二进制流上传,就不用jpg了

      后台处理base64 java代码片段

    /**
         * 上传base64 
         * @param imgBase64 图片base64
         * @param fileName 图片名称
         * @return
         */
        private String uploadImgBase64(String imgBase64,String fileName){
        	
        	String uploadPath=FILEDATE;
        	String fileExt = fileFileName.substring(fileFileName.lastIndexOf(".") + 1).toLowerCase();//上传的文件的后缀
        	String newFileName = fileName+ "." + fileExt;//上传后的文件名字
        	String uploadPathName = uploadPath + newFileName;//获取到上传后的文件路径+文件名
        	
        	BASE64Decoder decoder = new BASE64Decoder();
        	
        	imgBase64 = imgBase64.substring(30);  
        	
        	try {
        		imgBase64 = URLDecoder.decode(imgBase64,"UTF-8");
        		
        		byte[] decodedBytes = decoder.decodeBuffer(imgBase64);// 将字符串格式的imagedata转为二进制流(biye[])的decodedBytes
        		for(int i=0;i<decodedBytes.length;++i){  
    	            if(decodedBytes[i]<0) {
    	                //调整异常数据  
    	            	decodedBytes[i]+=256;  
    	            }  
    	        }
        		
    			//使用七牛上传
    			new QiniuUploadFile().upload(decodedBytes, uploadPathName);
    		} catch (IOException e) {
    			e.printStackTrace();
    		} 
        	
        	return uploadPathName;
        	
        }

    ===========================分割========================================

    头像需要改成圆形框的方法:

    cropper.js中没有提供圆形的方法,如果想要圆形的你要修改

    1. cropper.js的。 在cropper.js中找到 getCroppedCanvas方法 在context.drawImage.apply上添加

    var circle = {  
                    x: canvasWidth / 2,  
                    y: canvasHeight / 2,  
                    r: canvasWidth / 2  
               };  
                  
              context.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);  
              context.clip(); 

    2.在cropper.css 中 这改之后就只会生成 圆形图了

    .cropper-face  添加border-radius: 100%;  
      .cropper-view-box 删除outline outline-color 添加border: 2px solid #39f;  
      border-color: rgba(51, 153, 255, .75);  
      border-radius: 100%;  

     

    这改之后就只会生成 圆形图了,,具体想灵活的自由切换圆形跟矩形,就要进一步封装。

     

     

    我参考的文章咻咻咻

     

    1.jQuery简单且功能强大的图片剪裁插件          

    2.英文copper  api 当找不到方法时,可以看这里,不要怕英文版的,实在不行你可以一个一个试过去看看效果哈哈。不会告诉你我就是这么干的。

     

     

    3.HTML5 本地裁剪图片并上传至服务器(老梗)

     

     

    展开全文
  • 最近手机端的拍照上传图片,用的是APICloud来做APP,但是后台是用php处理的,我手机拍照后能获取到图片存在手机的路径,但是不知道怎么上传到云端的文件夹,感觉卡这个点了,有大神能指点一二吗? ![图片说明]...
  • 手机移动端多图片上传删除js代码,因multiple安卓手机中不兼容,所以安卓只能一次选中一张图片iOS系统可以实现多图片上传
  • WebUploader 手机上传图片

    千次阅读 2015-12-24 16:02:02
    但是一上传到服务器,用客户端上传就不能上传图片,最后控制器中(使用的是MVC模式)log发现后台根本接收不到。WebUploader上传的图片数据。就去查看API,发现该插件很不错,但是android 4 有BUG(我这边不
  • 遇到问题:有的手机拍摄的图片旋转90度,有的图片旋转了180度,有的手机是正常的,服务器要求的是正的,这样问题就来了,不能用户发个照片在微博看到的是被旋转了的啊,另外一个项目里旋转了的图片直接匹配出现...
  • mui开发的APP,手机选择相册照片上传照片,根据自己的需要demo可以进行修改,demo导入到Hbuilder中就可以模拟
  • 毕竟只是一个新手,解决这种复杂点的问题(相对而言),还是需要花费大量时间的,这篇文章花了两天的时间才实现的功能,现在就记录一下使用springboot怎么实现文件上传下载的。 我这里使用的是 springboot 2.0.3,...
  • 在网上找一个上传组件,html5也好,不知道哪位大牛能够给我提供一个移动端兼容性最好的图片上传组件,代码最精简易懂,我后台是用PHP需要开发的,最好有一个完整的案例,我网上找了好多基本没有看到满意的,求...
  • 但是安卓手机的浏览器(如小米手机自带浏览器,安卓QQ内置浏览器),一次只能选择一张图片。也就是只能上传一张图片。 &amp;lt;form action=&quot;uploadImage&quot; method=&quot;post&...
  • 移动端h5实现手机拍照上传图片,相册选择上传图片input type=file 有不足或者不对的下方留言,有不明白的也请下方留言,虽然我不一定能看到,话不多说代码,注释都写好了 <!doctype html> <...
  • 十一双假期刚刚结束,无论回家还是出游,不管是家里的庭院小景还是一路的美景扑面,你一定会拿起手机不断按下快门,记录每一个美的瞬间。如今长假归来,我们都希望能够马上和好友一起分享假期的美景趣事。可是,...
  • js手机上传图片,带压缩图片

    千次阅读 2019-07-17 10:07:47
    上传图片 style="display: none;" type="file" id="uploadFile" accept="image/png,image/jpeg" v-on:change="readLocalFile()" /> 2.压缩图片 核心代码: 1.FileReader将input中的图片本地url...
  • 手机移动端多图片上传删除js代码,因multiple安卓手机中不兼容,所以安卓只能一次选中一张图片iOS系统可以实现多图片上传
  • 主要为大家详细介绍了HTML5+Canvas,和jquery技术,调用手机拍照功能实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 我想在手机的网页做一个类似qq空间那样,点击可以访问图库或者拍照上传,请问有什么类型的插件可以使用,qq群部落那种也可以
  • html5网页中实现用手机相机拍照功能,并上传照片给后台.zip

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 112,376
精华内容 44,950
关键字:

在手机上怎么上传图片