java input 調(diào)用手機相機和本地照片上傳圖片到服務(wù)器然后壓縮的方法
在微信公眾號里面需要上傳頭像,時間比較緊,調(diào)用學(xué)習(xí)jssdk并使用 來不及 就用了input
1、使用input:file標簽, 去調(diào)用系統(tǒng)默認相機,攝像,錄音功能,其實是有個capture屬性,直接說明需要調(diào)用什么功能
<input type="file" accept="image/*" capture="camera"> <input type="file" accept="video/*" capture="camcorder"> <input type="file" accept="audio/*" capture="microphone">
capture表示,可以捕獲到系統(tǒng)默認的設(shè)備,比如:camera--照相機;camcorder--攝像機;microphone--錄音。
accept表示,直接打開系統(tǒng)文件目錄。
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[0];
photoCompress(file, 50, $(".progress_dialog")[0])
$(".progress_dialog").show();
if (!this.files.length) return;
var files = Array.prototype.slice.call(this.files);
if (files.length > 9) {
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();*/
});
})
/*
三個參數(shù)
file:一個是文件(類型是圖片格式),
w:一個是文件壓縮的后寬度,寬度越小,字節(jié)越小
objDiv:一個是容器或者回調(diào)函數(shù)
photoCompress()
*/
function photoCompress(file, w, objDiv) {
var ready = new FileReader();
/*開始讀取指定的Blob對象或File對象中的內(nèi)容. 當(dāng)讀取操作完成時,readyState屬性的值會成為DONE,如果設(shè)置了onloadend事件處理程序,則調(diào)用之.同時,result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內(nèi)容.*/
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 = 0, offsetY = 0;
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(0, 0, w, w);
if (imgWidth > imgHeight) {
imgWidth = w * imgWidth / imgHeight;
imgHeight = w;
offsetX = -Math.round((imgWidth - w) / 6);
} else {
imgHeight = w * imgHeight / imgWidth;
imgWidth = w;
offsetY = -Math.round((imgHeight - w) / 6);
}
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(".") + 1);
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 / 1024 >= 10 && length / 1024 < 100) {
if (compress(in, saveFile, 10)) {
System.out.println("圖片壓縮十倍!");
}
} else if (length / 1024 >= 100 && length / 1024 < 1000) {
if (compress(in, saveFile, 100)) {
System.out.println("圖片壓縮100倍!");
}
} else if (length / 1024 >= 1000 && length / 1024 < 10000) {
if (compress(in, saveFile, 1000)) {
System.out.println("圖片壓縮1000倍!");
}
} else if (length / 1024 < 10 && length / 1024 > 0) {
if (compress(in, saveFile, 1)) {
System.out.println("圖片壓縮1倍!");
}
}
} catch (Exception e) {
e.printStackTrace();
} finally {
in.close();
}
String filename = "/Path/" + s + s + "." + suffix;//服務(wù)器地址
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 {
/**
* 實現(xiàn)圖像的等比縮放
* @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();
// 這里想實現(xiàn)在targetW,targetH范圍內(nèi)實現(xiàn)等比縮放。如果不需要等比縮放
// 則將下面的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;
}
/**
* 實現(xiàn)圖像的等比縮放和縮放后的截取, 處理成功返回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;
}
/**
* 實現(xiàn)圖像的等比縮放和縮放后的截取, 處理成功返回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 > 0 || hight > 0) {
// 原圖的大小
int sw = srcImage.getWidth();
int sh = srcImage.getHeight();
// 如果原圖像的大小小于要縮放的圖像大小,直接將要縮放的圖像復(fù)制過去
if (sw > width && sh > hight) {
srcImage = resize(srcImage, width, hight);
} else {
String fileName = saveFile.getName();
String formatName = fileName.substring(fileName
.lastIndexOf('.') + 1);
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 = 0;
int y = h / 2 - hight / 2;
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 / 2 - width / 2;
int y = 0;
try {
saveSubImage(srcImage, new Rectangle(x, y, width, hight), saveFile);
} catch (IOException e) {
e.printStackTrace();
return false;
}
}
return true;
}
/**
* 實現(xiàn)圖像的等比縮放和縮放后的截取, 處理成功返回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 < 1){// 檢查參數(shù)有效性
//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 = 0;
int y = h / 2 - hight / 2;
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 / 2 - width / 2;
int y = 0;
try {
saveSubImage(srcImage, new Rectangle(x, y, width, hight), saveFile);
} catch (IOException e) {
e.printStackTrace();
return false;
}
}
return true;
}
/**
* 實現(xiàn)縮放后的截圖
* @param image 縮放后的圖像
* @param subImageBounds 要截取的子圖的范圍
* @param subImageFile 要保存的文件
* @throws IOException
*/
private static void saveSubImage(BufferedImage image,
Rectangle subImageBounds, File subImageFile) throws IOException {
if (subImageBounds.x < 0 || subImageBounds.y < 0
|| 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('.') + 1);
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;
//將輸入的數(shù)據(jù)轉(zhuǎn)為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, 10)){
System.out.println("圖片壓縮十倍!");
}
} catch (Exception e) {
e.printStackTrace();
} finally {
in.close();
}
}
}
以上這篇java input 調(diào)用手機相機和本地照片上傳圖片到服務(wù)器然后壓縮的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Spring中的DeferredImportSelector實現(xiàn)詳解
這篇文章主要介紹了Spring中的DeferredImportSelector實現(xiàn)詳解,兩個官方的實現(xiàn)類AutoConfigurationImportSelector和ImportAutoConfigurationImportSelector都是Spring Boot后新增的實現(xiàn),需要的朋友可以參考下2024-01-01

