在微信公众号里面需要上传头像,时间比较紧,调用学习jssdk并使用 来不及  就用了input

  1. 使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说明需要调用什么功能

    <input type="file" accept="image/*" capture="camera">

    <input type="file" accept="video/*" capture="camcorder">

    <input type="file" accept="audio/*" capture="microphone">

    capture表示,可以捕获到系统默认的设备,比如:camera--照相机;camcorder--摄像机;microphone--录音。

    accept表示,直接打开系统文件目录。

  2. input:file标签还支持一个multiple属性,表示可以支持多选,如:

    <input type="file" accept="image/*" multiple>

    加上这个multiple后,capture就没啥用了,因为multiple是专门用来支持多选的。

用form表单提交

 <form id="uploadForm" class="mui-input-group" style="width: 80%;margin: 0 auto;margin-top: 70px" action="/jxs/uploadtou.do" method="post" enctype="multipart/form-data" >
<div class="mui-input-row">
<label>图片</label>
<input required="required" class="mui-input-clear mui-input" type="file" name="file" id="photo_pick" accept="image/*">
</div> <div class="mui-content-padded" style="width: 90%;margin: 0 auto;margin-top: 5px;padding: 10px">
<input style="color:#FFFFFF ;width: 100%;background: #00F7DE" value="上传" type="submit">
</div>
</form>

上传之后图片显示在页面上

<div class="progress_dialog" style="margin-left:30px;margin-top:20px;width: 50%;height: 50%;"></div>

js

 <script>
/*图片地址
https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E9%AB%98%E6%B8%85%E7%BE%8E%E5%A5%B3%20%E4%B8%9D%E8%A2%9C%E5%B7%A8%E4%B9%B3&step_word=&hs=0&pn=1&spn=0&di=57234189540&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=2&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=3589338782%2C536437810&os=3988412231%2C488396405&simid=3515890414%2C233897128&adpicid=0&lpn=0&ln=1389&fr=&fmq=1490709487003_R&fm=result&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fwww.bz55.com%2Fuploads%2Fallimg%2F150416%2F139-1504161AK9.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bkzcc_z%26e3Bv54AzdH3F4jtgektzitAzdH3F8l9c9_z%26e3Bip4s&gsm=0&rpstart=0&rpnum=0
*/
$(function() {
$("#photo_pick").on("change", function () {
var file = this.files[];
photoCompress(file, , $(".progress_dialog")[])
$(".progress_dialog").show();
if (!this.files.length) return;
var files = Array.prototype.slice.call(this.files);
if (files.length > ) {
alert("最多同时只可上传9张图片");
return;
}
/* files.forEach(function (file, i) {
/!*var reader = new FileReader();
reader.onload = function () {
var imgO = document.createElement("img");
imgO.src = reader.result;
}*!/
reader.readAsDataURL(file);
$(".progress_dialog").hide();*/
});
}) /*
三个参数
file:一个是文件(类型是图片格式),
w:一个是文件压缩的后宽度,宽度越小,字节越小
objDiv:一个是容器或者回调函数
photoCompress()
*/
function photoCompress(file, w, objDiv) {
var ready = new FileReader();
/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(file);
ready.onload = function () {
var re = this.result;
canvasDataURL(re, w, objDiv) }
} function canvasDataURL(re, w, objDiv) {
var newImg = new Image();
newImg.src = re;
var imgWidth, imgHeight, offsetX = , offsetY = ;
newImg.onload = function () {
var img = document.createElement("img");
img.src = newImg.src;
imgWidth = img.width;
imgHeight = img.height;
var canvas = document.createElement("canvas");
canvas.width = w;
canvas.height = w;
var ctx = canvas.getContext("2d");
ctx.clearRect(, , w, w);
if (imgWidth > imgHeight) {
imgWidth = w * imgWidth / imgHeight;
imgHeight = w;
offsetX = -Math.round((imgWidth - w) / );
} else {
imgHeight = w * imgHeight / imgWidth;
imgWidth = w;
offsetY = -Math.round((imgHeight - w) / );
}
ctx.drawImage(img, offsetX, offsetY, imgWidth, imgHeight);
var base64 = canvas.toDataURL("image/jpeg", 0.1);
if (typeof objDiv == "object") {
objDiv.appendChild(canvas);
} else if (typeof objDiv == "function") {
objDiv(base64);
}
} }
</script>

后台接收以及压缩

    @PostMapping("/uploadtou.do")
public String uploadtou(@RequestParam(value = "file") MultipartFile file, HttpServletRequest request) throws IOException {
System.out.println(file);
String result = "";
if (!file.isEmpty()) {
try {
Shopuser u = (Shopuser) request.getSession().getAttribute("currentUser");
String extName = file.getOriginalFilename();
String fileName = file.getName();
String suffix = extName.substring(extName.lastIndexOf(".") + );
System.err.println(suffix);
Date now = new Date();
SimpleDateFormat outFormat = new SimpleDateFormat("yyyyMMddHHmmss");
String s = outFormat.format(now);
BufferedOutputStream bos = new BufferedOutputStream(
new FileOutputStream(new File("D:\\xiangmu\\demo\\" + s + "." + suffix)));
bos.write(file.getBytes());
bos.flush();
bos.close();
/**
* compress 图片缩放类的使用(缩略图)
* srcImage 为InputStream对象
* Rectangle 为需要截图的长方形坐标
* proportion 为压缩比例
* **/
InputStream in = null;
//缩放后需要保存的路径
File saveFile = new File("D:\\xiangmu\\demo\\" + s + s + "." + suffix);
try {
//原图片的路径
in = new FileInputStream(new File("D:\\xiangmu\\demo\\" + s + "." + suffix));
int length = in.available();
if (length / >= && length / < ) {
if (compress(in, saveFile, )) {
System.out.println("图片压缩十倍!");
}
} else if (length / >= && length / < ) {
if (compress(in, saveFile, )) {
System.out.println("图片压缩100倍!");
}
} else if (length / >= && length / < ) {
if (compress(in, saveFile, )) {
System.out.println("图片压缩1000倍!");
}
} else if (length / < && length / > ) {
if (compress(in, saveFile, )) {
System.out.println("图片压缩1倍!");
}
} } catch (Exception e) {
e.printStackTrace();
} finally {
in.close();
}
String filename = "/Path/" + s + s + "." + suffix;//服务器地址
System.out.println(filename);
int a = shopService.updateImg(u.getId(), filename);
System.out.println(filename);
} catch (Exception e) {
e.printStackTrace();
}
} else {
} return "wode.html";
}

图片处理类

package com.example.springbootshop.util;

import org.junit.Test;

import java.awt.Graphics2D;
import java.awt.Rectangle;
import java.awt.RenderingHints;
import java.awt.geom.AffineTransform;
import java.awt.image.BufferedImage;
import java.awt.image.ColorModel;
import java.awt.image.WritableRaster;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream; import javax.imageio.ImageIO; /**
* 图片工具类,完成图片的截取
* 所有方法返回值均未boolean型
*/
public class ImageHelper {
/**
* 实现图像的等比缩放
* @param source
* @param targetW
* @param targetH
* @return
*/
private static BufferedImage resize(BufferedImage source, int targetW,
int targetH) {
// targetW,targetH分别表示目标长和宽
int type = source.getType();
BufferedImage target = null;
double sx = (double) targetW / source.getWidth();
double sy = (double) targetH / source.getHeight();
// 这里想实现在targetW,targetH范围内实现等比缩放。如果不需要等比缩放
// 则将下面的if else语句注释即可
if (sx < sy) {
sx = sy;
targetW = (int) (sx * source.getWidth());
} else {
sy = sx;
targetH = (int) (sy * source.getHeight());
}
if (type == BufferedImage.TYPE_CUSTOM) { // handmade
ColorModel cm = source.getColorModel();
WritableRaster raster = cm.createCompatibleWritableRaster(targetW,
targetH);
boolean alphaPremultiplied = cm.isAlphaPremultiplied();
target = new BufferedImage(cm, raster, alphaPremultiplied, null);
} else
target = new BufferedImage(targetW, targetH, type);
Graphics2D g = target.createGraphics();
// smoother than exlax:
g.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
RenderingHints.VALUE_INTERPOLATION_BICUBIC);
g.drawRenderedImage(source, AffineTransform.getScaleInstance(sx, sy));
g.dispose();
return target;
} /**
* 实现图像的等比缩放和缩放后的截取, 处理成功返回true, 否则返回false
* @param inFilePath 要截取文件的路径
* @param outFilePath 截取后输出的路径
* @param width 要截取宽度
* @param hight 要截取的高度
* @throws Exception
*/
public static boolean compress(String inFilePath, String outFilePath,
int width, int hight) {
boolean ret = false;
File file = new File(inFilePath);
File saveFile = new File(outFilePath);
InputStream in = null;
try {
in = new FileInputStream(file);
ret = compress(in, saveFile, width, hight);
} catch (FileNotFoundException e) {
e.printStackTrace();
ret = false;
} finally{
if(null != in){
try {
in.close();
} catch (IOException e) {
e.printStackTrace();
}
}
} return ret;
} /**
* 实现图像的等比缩放和缩放后的截取, 处理成功返回true, 否则返回false
* @param in 要截取文件流
* @param outFilePath 截取后输出的路径
* @param width 要截取宽度
* @param hight 要截取的高度
* @throws Exception
*/
public static boolean compress(InputStream in, File saveFile,
int width, int hight) {
// boolean ret = false;
BufferedImage srcImage = null;
try {
srcImage = ImageIO.read(in);
} catch (IOException e) {
e.printStackTrace();
return false;
} if (width > || hight > ) {
// 原图的大小
int sw = srcImage.getWidth();
int sh = srcImage.getHeight();
// 如果原图像的大小小于要缩放的图像大小,直接将要缩放的图像复制过去
if (sw > width && sh > hight) {
srcImage = resize(srcImage, width, hight);
} else {
String fileName = saveFile.getName();
String formatName = fileName.substring(fileName
.lastIndexOf('.') + );
try {
ImageIO.write(srcImage, formatName, saveFile);
} catch (IOException e) {
e.printStackTrace();
return false;
}
return true;
}
}
// 缩放后的图像的宽和高
int w = srcImage.getWidth();
int h = srcImage.getHeight();
// 如果缩放后的图像和要求的图像宽度一样,就对缩放的图像的高度进行截取
if (w == width) {
// 计算X轴坐标
int x = ;
int y = h / - hight / ;
try {
saveSubImage(srcImage, new Rectangle(x, y, width, hight), saveFile);
} catch (IOException e) {
e.printStackTrace();
return false;
}
}
// 否则如果是缩放后的图像的高度和要求的图像高度一样,就对缩放后的图像的宽度进行截取
else if (h == hight) {
// 计算X轴坐标
int x = w / - width / ;
int y = ;
try {
saveSubImage(srcImage, new Rectangle(x, y, width, hight), saveFile);
} catch (IOException e) {
e.printStackTrace();
return false;
}
} return true;
} /**
* 实现图像的等比缩放和缩放后的截取, 处理成功返回true, 否则返回false
* @param in 图片输入流
* @param saveFile 压缩后的图片输出流
* @param proportion 压缩比
* @throws Exception
*/
public static boolean compress(InputStream in, File saveFile, int proportion) {
if(null == in
||null == saveFile
||proportion < ){// 检查参数有效性
//LoggerUtil.error(ImageHelper.class, "--invalid parameter, do nothing!");
return false;
} BufferedImage srcImage = null;
try {
srcImage = ImageIO.read(in);
} catch (IOException e) {
e.printStackTrace();
return false;
}
// 原图的大小
int width = srcImage.getWidth() / proportion;
int hight = srcImage.getHeight() / proportion; srcImage = resize(srcImage, width, hight); // 缩放后的图像的宽和高
int w = srcImage.getWidth();
int h = srcImage.getHeight();
// 如果缩放后的图像和要求的图像宽度一样,就对缩放的图像的高度进行截取
if (w == width) {
// 计算X轴坐标
int x = ;
int y = h / - hight / ;
try {
saveSubImage(srcImage, new Rectangle(x, y, width, hight), saveFile);
} catch (IOException e) {
e.printStackTrace();
return false;
}
}
// 否则如果是缩放后的图像的高度和要求的图像高度一样,就对缩放后的图像的宽度进行截取
else if (h == hight) {
// 计算X轴坐标
int x = w / - width / ;
int y = ;
try {
saveSubImage(srcImage, new Rectangle(x, y, width, hight), saveFile);
} catch (IOException e) {
e.printStackTrace();
return false;
}
} return true;
} /**
* 实现缩放后的截图
* @param image 缩放后的图像
* @param subImageBounds 要截取的子图的范围
* @param subImageFile 要保存的文件
* @throws IOException
*/
private static void saveSubImage(BufferedImage image,
Rectangle subImageBounds, File subImageFile) throws IOException {
if (subImageBounds.x < || subImageBounds.y <
|| subImageBounds.width - subImageBounds.x > image.getWidth()
|| subImageBounds.height - subImageBounds.y > image.getHeight()) {
//LoggerUtil.error(ImageHelper.class, "Bad subimage bounds");
return;
}
BufferedImage subImage = image.getSubimage(subImageBounds.x,subImageBounds.y, subImageBounds.width, subImageBounds.height);
String fileName = subImageFile.getName();
String formatName = fileName.substring(fileName.lastIndexOf('.') + );
ImageIO.write(subImage, formatName, subImageFile);
} @Test
public static void main(String[] args) throws Exception { /**
* saveSubImage 截图类的使用
* srcImage 为BufferedImage对象
* Rectangle 为需要截图的长方形坐标
* saveFile 需要保存的路径及名称
* **/
//需要截图的长方形坐标
/*Rectangle rect =new Rectangle();
rect.x=40;
rect.y=40;
rect.height=160;
rect.width=160; InputStream in = null;
//需要保存的路径及名称
File saveFile = new File("d:\\ioc\\files\\aaa2.jpg");
//需要进行处理的图片的路径
in = new FileInputStream(new File("d:\\ioc\\files\\aaa.jpg"));
BufferedImage srcImage = null;
//将输入的数据转为BufferedImage对象
srcImage = ImageIO.read(in); ImageHelper img=new ImageHelper();
img.saveSubImage(srcImage, rect, saveFile);*/ /**
* compress 图片缩放类的使用(缩略图)
* srcImage 为InputStream对象
* Rectangle 为需要截图的长方形坐标
* proportion 为压缩比例
* **/
InputStream in = null;
//缩放后需要保存的路径
File saveFile = new File("D:\\xiangmu\\demo\\20180523192742IMG_0049123.jpg");
try {
//原图片的路径
in = new FileInputStream(new File("D:\\xiangmu\\demo\\20180523192742IMG_0049.jpg"));
if(compress(in, saveFile, )){
System.out.println("图片压缩十倍!");
}
} catch (Exception e) {
e.printStackTrace();
} finally {
in.close();
}
}
}

java input 实现调用手机相机和本地照片上传图片到服务器然后压缩的更多相关文章

  1. java命令行调用本地文件协议hikvideoclient://

    最近在做一个视频项目,项目中需要通过调用海康本地协议打开视频播放器,起初尝试通过Process/ProcessBuilder无解,因为这个是调用本地应用程序的. 我要调用的是本地伪协议,最终通过一些研 ...

  2. html5调用手机相机并压缩、上传

    近日刚做的一个功能,要在app里使用内嵌页面进行图像的上传.从功能上看,原生的实现应该是最好的.毕竟页面上所有的东西都隔着一个浏览器,所有的实现都要依赖浏览器提供的接口,不同的浏览器对接口的实现又有差 ...

  3. html5直接调用手机相机照相/录像

    现在的h5功能越来越强大.之前做项目时上传功能input type=file时,在IOS下居然可以直接照相...但是在安卓上是不能.后面研究 了下,其实安卓下也可以的. 就是在input上加上capt ...

  4. HTML5调用手机相机拍照

    前端调用手机相机拍照 实现方式常见有两种: 一种是通过video控件,通过捕获video的流,截取video中的图像实现拍照, 还有一种是通过input[file]控件调用移动端的摄像头,实现拍照. ...

  5. 用java 代码下载Samba服务器上的文件到本地目录以及上传本地文件到Samba服务器

    引入: 在我们昨天架设好了Samba服务器上并且创建了一个 Samba 账户后,我们就迫不及待的想用JAVA去操作Samba服务器了,我们找到了一个框架叫 jcifs,可以高效的完成我们工作. 实践: ...

  6. 选择本地照片之后即显示在Img中(客户体验)

    最近转战MVC项目,然后又再次遇到照片上传的实现,之前都是使用ASP.NET,虽然也有照片上传,而且出于客户体验考虑, 也实现了选择本地照片之后即时显示在IMG中,在这里就简单介绍其实现(ASP.NE ...

  7. 在网页程序或Java程序中调用接口实现短信猫收发短信的解决方案

    方案特点: 在网页程序或Java程序中调用接口实现短信猫收发短信的解决方案,简化软件开发流程,减少各应用系统相同模块的重复开发工作,提高系统稳定性和可靠性. 基于HTTP协议的开发接口 使用特点在网页 ...

  8. JAVA的JNI调用

    由于JNI调用C和调用C++差不多,而且C++中可以混合写C代码,所以这里主要是写关于JNI调用C++的部分. 一般步骤: 先是写普通的Java类,其中包括本地方法调用.  然后编译这个Java类,调 ...

  9. [转]Java远程方法调用

    Java远程方法调用,即Java RMI(Java Remote Method Invocation)是Java编程语言里,一种用于实现远程过程调用的应用程序编程接口.它使客户机上运行的程序可以调用远 ...

随机推荐

  1. django 加日志

    LOGGING = { 'version': 1, 'disable_existing_loggers': False, # 指定输出的格式,被handler使用. 'formatters': { ' ...

  2. CAD得到自定义实体拖放夹点(com接口VB语言)

    主要用到函数说明: MxDrawXCustomEvent::MxDrawXCustomEntity::getGripPoints 自定义实体事件,得到拖放夹点,详细说明如下: 参数 说明 LONGLO ...

  3. Java字符字符串类

    Java字符字符串类 Character 类 Character 类用于对单个字符进行操作.Character 类在对象中包装一个基本类型 char 的值在实际开发过程中,我们经常会遇到需要使用对象, ...

  4. windows上关闭Nagle算法

    下面的设置可以调整或禁用 nagel 算法.禁用 nagel 算法以后, 允许很小的包没有延迟立即发送.建议对某些游戏关闭 nagel 算法, 这样做对文件传输/吞吐量有负面影响.默认状态( 开启na ...

  5. 经典的GDB调试命令,包括查看变量,查看内存

    经典的GDB调试命令,包括查看变量,查看内存 在你调试程序时,当程序被停住时,你可以使用print命令(简写命令为p),或是同义命令inspect来查看当前程序的运行数据.print命令的格式是: p ...

  6. 环形缓冲区: ringbuf.c

    #cat aa.c /*ringbuf .c*/ #include<stdio.h> #include<ctype.h> #define NMAX 8 int iput = 0 ...

  7. luogu P1775 古代人的难题_NOI导刊2010提高(02)(斐波纳契+数学)

    题意 已知x,y为整数,且满足以下两个条件: 1.x,y∈[1…k],且x,y,k∈Z 2.(x^2-xy-y^2)^2=1 给你一个整数k,求一组满足上述条件的x,y并且使得x^2+y^2的值最大. ...

  8. java常见知识

    在JSP页面获取当前项目名称的方法: 方法1: <%= this.getServletContext().getContextPath() %> 方法2: 使用EL表达式 ${pageCo ...

  9. Navicat premium连接Oracle报ORA-12545错误

    1:ORA-12545 原因: 这里填localhost,127.0.0.1,或者远程ip.

  10. 【codeforces 796D】Police Stations

    [题目链接]:http://codeforces.com/contest/796/problem/D [题意] 在一棵树上,保证每个点在距离d之内都有一个警察局; 让你删掉最多的边,使得剩下的森林仍然 ...