js h5 上传图片 转成base64 进行图片压缩 不失真

  1. >  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
  6.         <title>测试title>  
  7.         <link rel="stylesheet" href="./css/index.css" />  
  8.         <link rel="stylesheet" href="./css/index_1.css" />  
  9.         <script type="text/javascript" src="script/jquery.min.js">script>  
  10.         <script type="text/javascript" src="script/ys.js">script>  
  11.     head>  
  12.     <body>  
  13.         <div class="free-upload">  
  14. H5页面            <p>  
  15.                 上传您的约会照片,上传图片  
  16.             p>  
  17.             <div class="free-upload-photo">  
  18.                 <span id="photo_img">span>  
  19.                 <input type="file" id="photo" onchange="start_upload(this)"/>  
  20.             div>  
  21.         div>  
  22.         <img src="" id="csimg" width="200" height="200"/>  
  23.     body>  
  24.     <script>  
  25.         function start_upload(obj){  
  26.              if(!isCanvasSupported){  
  27.                 console.log("2222");  
  28.              }else{  
  29.                 compress(event, function(base64Img){  
  30.                     $("#csimg").attr("src",base64Img);  
  31.                     console.log(base64Img);  
  32.                     // 如需保存  或 把base64转成图片  ajax提交后台处理  
  33.                     // 我这里采用ajax方式 自己封装的   
  34.                     ajax('qnl_app/tes_ac_img',{'base64Img':base64Img},function(date){  
  35.                         console.log(JSON.stringify(date));  
  36.                     });  
  37.                 });  
  38.              }  
  39.         }  
  40.           
  41.     script>  
  42. html>  

以上是H5页面

下面是 压缩js


[javascript]  view plain  copy
  1. //判断是否存在画布  
  2. function isCanvasSupported() {  
  3.     var elem = document.createElement('canvas');  
  4.     return !!(elem.getContext && elem.getContext('2d'));  
  5. }  
  6.   
  7. //压缩方法  
  8. function compress(event, callback) {  
  9.     if ( typeof (FileReader) === 'undefined') {  
  10.         console.log("当前浏览器内核不支持base64图标压缩");  
  11.         //调用上传方式  不压缩  
  12.     } else {  
  13.         try {  
  14.             var file = event.currentTarget.files[0];  
  15.              if(!/image\/\w+/.test(file.type)){     
  16.                     alert("请确保文件为图像类型");    
  17.                     return false;    
  18.              }   
  19.             var reader = new FileReader();  
  20.             reader.onload = function (e) {  
  21.             var image = $('');  
  22.             image.load(function () {  
  23.             console.log("开始压缩");  
  24.             var square = 700;  
  25.             var canvas = document.createElement('canvas');  
  26.             canvas.width = square;  
  27.             canvas.height = square;  
  28.             var context = canvas.getContext('2d');  
  29.             context.clearRect(0, 0, square, square);  
  30.             var imageWidth;  
  31.             var imageHeight;  
  32.             var offsetX = 0;  
  33.             var offsetY = 0;  
  34.             if (this.width > this.height) {  
  35.               imageWidth = Math.round(square * this.width / this.height);  
  36.               imageHeight = square;  
  37.               offsetX = - Math.round((imageWidth - square) / 2);  
  38.             } else {  
  39.               imageHeight = Math.round(square * this.height / this.width);  
  40.               imageWidth = square;  
  41.               offsetY = - Math.round((imageHeight - square) / 2);  
  42.             }  
  43.             context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);  
  44.             var data = canvas.toDataURL('image/jpeg');    //使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png,因为压缩成png后base64的字符串可能比不转换前的长!

  45.                 //压缩完成执行回调  
  46.                callback(data);  
  47.             });  
  48.             image.attr('src', e.target.result);  
  49.             };  
  50.             reader.readAsDataURL(file);  
  51.         } catch(e) {  
  52.             console.log("压缩失败!");  
  53.             //调用上传方式  不压缩  
  54.         }  
  55.     }  
  56. }  


转自:http://blog.csdn.net/wangbo54979/article/details/70227578

你可能感兴趣的:(JavaScript)