图片上传预览

发表于 | 分类于 |

整理一份涵盖图片上传预览验证压缩的文件

项目预览：https://sxiaobiblog.comuploadImg/ 项目地址：https://github.com/sywsywsyw/uploadImg

HTML部分

1
2
3
4
5
<h1>图片上传预览</h1>
<input type="file" id="img-upload" accept="image/jpg,image/png,image/gif,image/jpeg">
<div class="img-view-wrap">
  <img id="img-view"  src="" alt="预览图片">
</div>

CSS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.img-view-wrap{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
border: 1px solid #e2e2e2;
position:relative;
overflow:hidden;
}
#img-view{
display: block;
position: absolute;
top: 50%;
left: 50%;
height: 100%;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

HTML部分

1
2
3
4
5
6
<h1>图片上传预览</h1>
<input type="file" id="img-upload" accept="image/jpg,image/png,image/gif,image/jpeg">
<div class="img-view-wrap">
  <img id="img-view"  src="" alt="预览图片">
</div>
`

JS部分（详情请看备注）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<script>
 $('#img-upload').change(function(){
  setImagePreviews('img-upload','img-view');
});
//图片预览
function setImagePreviews(dval, dimg) {
  var docObj = document.getElementById(dval);
  console.log(docObj.files);
    if ( docObj.files.length > 0) {  //判断上传数量大于0
      var fileList = docObj.files[0];
      var name = fileList.name;
      var size = fileList.size;
      var url = window.URL.createObjectURL(fileList);
      if (checkPhoto(name) == false) {
        alert('请上传正确的图片格式');
        $('#' + dval).val('');
        $('#' + dimg).attr('src', '');
        return false;
      }else if (imgSize(size, 3) == false) {
        alert('请上传小于3M的图片');
        $('#' + dval).val('');
        $('#' + dimg).attr('src', '');
        return false;
      }else if (url != '' || url != null) {
        dealImage(url,{'width' : 400},function(base){
          $('#' + dval).text('重新上传');
          $('#' + dimg).attr('src', base);
                // console.log("压缩后：" + base.length / 1024 + " " + base);　

// var form=document.forms[0];
// var formData = new FormData(form);   //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数
// var formData = new FormData($( "#zhfbForm" )[0]);  上面的form不生效可以使用id取
// console.log(formData.get('theme')); 打印获取到的数据
// console.log(formData.get('face'));
// formData.append("face",document.getElementById('face').files[0]); 上传图片
var formData = new FormData();
formData.append("imageName",convertBase64UrlToBlob(base));
console.log(formData.get('imageName'));
$.ajax({
    url: "http://192.168.1.120:8080/index.php", //请求的url地址
    type: "POST", //请求方式 GET
    data: formData, //参数值
    cache: false,
    contentType: false,     // 告诉jQuery不要去处理发送的数据
    processData: false,     // 告诉jQuery不要去设置Content-Type请求头
    dataType: 'JSON',
    success: function (req) { //请求成功时处理
      console.log(req);
    },
    error: function (req) { //请求出错处理
      console.log(req);
    }
  });

function convertBase64UrlToBlob(urlData){
    var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte
    //处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < bytes.length; i++) {
      ia[i] = bytes.charCodeAt(i);
    }
    return new Blob( [ab] , {type : 'image/png'});
  }
});
            // $('#' + dval).text('重新上传');
            // $('#' + dimg).attr('src', url);
          }
        }else{
         $('#' + dval).val('');
         $('#' + dimg).attr('src', '');
       }
     }
//判断图片类型
//str 图片名称
function checkPhoto(str){
 var type="";
 if( str !='' ){
   type= str.match(/^(.*)(\.)(.{1,8})$/)[3];
   type= type.toUpperCase();
 }
 if( type!="JPEG"   &&   type!="PNG"   &&   type!="JPG"   &&   type!="GIF"){
   return false;
 }
}
//data 图片数据 spec 最大数量 1 2 3 4 5
function imgSize(data,spec){
  if( data > (spec*1024)*1024 ){
    return false;
  }
}
/**
 * 图片压缩，默认同比例压缩
 * @param {Object} path
 *   pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径
 * @param {Object} obj
 *   obj 对象 有 width， height， quality(0-1)
 * @param {Object} callback
 *   回调函数有一个参数，base64的字符串数据
 */
 function dealImage(path, obj, callback){
   var img = new Image();
   img.src = path;
   img.onload = function(){
    var that = this;
  // 默认按比例压缩
  var w = that.width,
  h = that.height,
  scale = w / h;
  w = obj.width || w;
  h = obj.height || (w / scale);
  var quality = 1;  // PC默认图片质量为0.7
  // var quality = 0.7;  // 移动端默认图片质量为0.7
  //生成canvas
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');

  // 创建属性节点
  var anw = document.createAttribute("width");
  anw.nodeValue = w;
  var anh = document.createAttribute("height");
  anh.nodeValue = h;
  canvas.setAttributeNode(anw);
  canvas.setAttributeNode(anh);
  ctx.fillStyle = "#fff";  //给png图片 在canvas绘制前填充白色背景
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(that, 0, 0, w, h);
  // 图像质量
  if(obj.quality && obj.quality <= 1 && obj.quality > 0){
   quality = obj.quality;
 }
  // quality值越小，所绘制出的图像越模糊
  var base64 = canvas.toDataURL('image/jpeg', quality );
  // 回调函数返回base64的值
  callback(base64);
}
}
// // 调用函数处理图片 　　　　　　　　　　　　　　　　
// dealImage("路径", {
// // 注意：在pc端可以用绝对路径或相对路径，移动端最好用绝对路径（因为用take photo后的图片路径，我没有试成功（如果有人试成功了可以分享一下经验））
//  width : 200
// }, function(base){
// //直接将获取到的base64的字符串，放到一个image标签中就可看到测试后的压缩之后的样式图了
//  document.getElementById("transform").src = base;
//  console.log("压缩后：" + base.length / 1024 + " " + base);　　　　
// })
</script>

Canvas 在高清屏下绘制图片变模糊的解决方法http://blog.csdn.net/qyaroon/article/details/51916150
canvas转base64/jpeg时，透明区域变成黑色背景的解决方案 - 大灰狼的小绵羊哥哥的博客 - CSDN博客http://blog.csdn.net/sinat_17775997/article/details/58708042

0%