微信手机网页上传图片高效率压缩(Canvas+Base64)

最近有一个小项目,有这么一个需求,要把照片上传到服务器,可是现在手机照片都是几M几M的,所以必须压缩下,我百度来百度去,也问了下网友,终于,在网友的帮助下,写出来了..

下面先上个压缩效果图

然后上前端代码吧...

<body><img id="preview" src="" width="150" height="180" style="display: block; width: 150px; height: 180px;">
<input type="file" name="file" id="doc" style="width:150px;" οnchange="javascript:setImagePreview();"><canvas id="cans" ></canvas>
<br><br>
<button>上传</button><br><br><br><br><br><br>
<div></div><script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else
{
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e)
{
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}$(document).ready(function()
{$('button').click(function(){var img_this=new Image();img_this.src=$('#preview').attr('src');var width = img_this.width,height = img_this.height;var scale = width / height;// alert(width+"\r\n"+height+"\r\n"+scale);
width1 = 300;
height1 = parseInt(width1 / scale);
var canvas = $("#cans");canvas[0].width = width1; canvas[0].height = height1;
var ctx = canvas[0].getContext('2d');
ctx.drawImage(img_this,0,0,width,height,0,0,width1,height1);var cropStr =canvas[0].toDataURL("image/jpeg",0.5);
$('div').append("<p>"+cropStr+"</p>"); alert("1");$.ajax( {  url:'../UserServlet?method=uploadImgs',// 发送Base64格式的字符串到后端,后端可以转化成图片的, data:{  img1:cropStr },  type:'post',  cache:false,  dataType:'json',  success:function(data) {  if(data.msg =="true" ){  // view("修改成功！");  alert("修改成功！");  window.location.reload();  }else{  view(data.msg);  }  },  error : function() {  // view("异常！");  alert("异常！");  }  });})
})
</script>

代码太多了,解释下核心思想吧..

主要想法就是先把图片画在canvas上,然后toDataUrl转化为Base64编码的字符串,然后把这个东西发到后台,就可以得到图片了,非常好用

下面是核心代码,

 var img_this=new Image();img_this.src=$('#preview').attr('src');

 var width = img_this.width,height = img_this.height;var scale = width / height;// alert(width+"\r\n"+height+"\r\n"+scale);
width1 = 300;
height1 = parseInt(width1 / scale);
var canvas = $("#cans");canvas[0].width = width1; canvas[0].height = height1;
var ctx = canvas[0].getContext('2d');
ctx.drawImage(img_this,0,0,width,height,0,0,width1,height1);var cropStr =canvas[0].toDataURL("image/jpeg",0.5);

cropStr就是Base64编码的图片哦..

下面在来一段后台转码的代码吧

package sys.nit.djt.serviece;import java.io.FileOutputStream;
import java.io.OutputStream;import Decoder.BASE64Decoder;public class Base64ToImg {//base64字符串转化成图片  public static boolean GenerateImage(String imgStr)  {   //对字节数组字符串进行Base64解码并生成图片  if (imgStr == null) //图像数据为空  return false;  BASE64Decoder decoder = new BASE64Decoder();  try   {  //Base64解码  byte[] b = decoder.decodeBuffer(imgStr);  for(int i=0;i<b.length;++i)  {  if(b[i]<0)  {//调整异常数据  b[i]+=256;  }  }  //生成jpeg图片  String imgFilePath = "d://222.jpg";//新生成的图片  OutputStream out = new FileOutputStream(imgFilePath);      out.write(b);  out.flush();  out.close();  return true;  }   catch (Exception e)   {  return false;  }  }
}

微信手机网页上传图片高效率压缩(Canvas+Base64)相关推荐

手机网页版JS压缩上传图片--base64位兼容IOS和安卓
首先,我用到了一款插件,是纯JS压缩上传插件,第一次用CSDN,不太会用,我把插件所有代码拷贝在文章末尾. 加载JS插件<script src="__JS__/dist/lrz.mob ...
微信小程序——拍照、压缩转换base64（不留存照片在本地相册）
文章目录前言展示效果 js wxml compress.js 总结前言通常使用wx.chooseImage这个api去拍照时通常会留下照片在本地相册,在一些需求情况下不需要留存照片所以在这里我 ...
【微信支付】微信端的手机网页支付开发流程
-----------------------------------------------------------------------------------------------1.微信 ...
微信H5手机网页开发—快速入门
序言随着微信(WeChat)的盛行,一个流行的开发工作也随之诞生--微信公众号开发,而其中最主要的部分,当属微信H5网页开发. 虽然网页开发大家并不陌生,但层出不穷的手机型号,导致了微信网页开发中遇 ...
微信小程序上传图片压缩方案
小程序上传图片需要进行压缩,可以使用wx.getFileSystemManager()方法将图片转换成base64格式,再使用canvas将图片压缩成指定大小. //选择图片wx.chooseImag ...
base64压缩/canvas.toDataURL
"jpg和jpeg没有区别,是缩写的程度不同.jpeg文件扩展名应该为.jpeg,dos 时代的8.3文件规定扩展名不能超过3个字符,就使用了.jpg. canvas.toDataURL(t ...
taro 兼容支付宝小程序和微信小程序＜七＞-- 上传图片及图片转base64
项目:taro3 + vue3 描述: 上传图片,证件的地方需要识别微信和h5端是用的base64方式传参 -> taro兼容微信小程序和h5 - 上传图片及转换base64 本文是在以上的基 ...
视频教程-10分钟搞定 php+H5手机网页微信支付在线视频教程（含源代码）-微信开发
10分钟搞定 php+H5手机网页微信支付在线视频教程(含源代码) 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. ...
python手机远程控制电脑访问网页_Python 实战系列-微信或网页远程控制电脑
Python 实战系列-微信或网页远程控制电脑本系列课程为Python实战系列课程:使用微信控制电脑,使用Python的Web框架Flask搭建网页, 并使用网页控制电脑:使用wxPython编写图 ...

微信手机网页上传图片高效率压缩(Canvas+Base64)

微信手机网页上传图片高效率压缩(Canvas+Base64)相关推荐

最新文章

热门文章