您好,登錄后才能下訂單哦!
在微信公眾號(hào)里面需要上傳頭像,時(shí)間比較緊,調(diào)用學(xué)習(xí)jssdk并使用 來(lái)不及 就用了input
1、使用input:file標(biāo)簽, 去調(diào)用系統(tǒng)默認(rèn)相機(jī),攝像,錄音功能,其實(shí)是有個(gè)capture屬性,直接說(shuō)明需要調(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)默認(rèn)的設(shè)備,比如:camera--照相機(jī);camcorder--攝像機(jī);microphone--錄音。
accept表示,直接打開系統(tǒng)文件目錄。
2、input:file標(biāo)簽還支持一個(gè)multiple屬性,表示可以支持多選,如:
<input type="file" accept="image/*" multiple>
加上這個(gè)multiple后,capture就沒(méi)啥用了,因?yàn)閙ultiple是專門用來(lái)支持多選的。
用form表單提交
<form id="uploadForm" class="mui-input-group" 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" > <input value="上傳" type="submit"> </div> </form>
上傳之后圖片顯示在頁(yè)面上
<div class="progress_dialog" ></div>
js
<script> /*圖片地址 https://cache.yisu.com/upload/information/20200623/121/101839.html&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("最多同時(shí)只可上傳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();*/ }); }) /* 三個(gè)參數(shù) file:一個(gè)是文件(類型是圖片格式), w:一個(gè)是文件壓縮的后寬度,寬度越小,字節(jié)越小 objDiv:一個(gè)是容器或者回調(diào)函數(shù) photoCompress() */ function photoCompress(file, w, objDiv) { var ready = new FileReader(); /*開始讀取指定的Blob對(duì)象或File對(duì)象中的內(nèi)容. 當(dāng)讀取操作完成時(shí),readyState屬性的值會(huì)成為DONE,如果設(shè)置了onloadend事件處理程序,則調(diào)用之.同時(shí),result屬性中將包含一個(gè)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>
后臺(tái)接收以及壓縮
@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對(duì)象 * Rectangle 為需要截圖的長(zhǎng)方形坐標(biāo) * 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 { /** * 實(shí)現(xiàn)圖像的等比縮放 * @param source * @param targetW * @param targetH * @return */ private static BufferedImage resize(BufferedImage source, int targetW, int targetH) { // targetW,targetH分別表示目標(biāo)長(zhǎng)和寬 int type = source.getType(); BufferedImage target = null; double sx = (double) targetW / source.getWidth(); double sy = (double) targetH / source.getHeight(); // 這里想實(shí)現(xiàn)在targetW,targetH范圍內(nèi)實(shí)現(xiàn)等比縮放。如果不需要等比縮放 // 則將下面的if else語(yǔ)句注釋即可 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; } /** * 實(shí)現(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; } /** * 實(shí)現(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ù)制過(guò)去 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(); // 如果縮放后的圖像和要求的圖像寬度一樣,就對(duì)縮放的圖像的高度進(jìn)行截取 if (w == width) { // 計(jì)算X軸坐標(biāo) 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; } } // 否則如果是縮放后的圖像的高度和要求的圖像高度一樣,就對(duì)縮放后的圖像的寬度進(jìn)行截取 else if (h == hight) { // 計(jì)算X軸坐標(biāo) 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; } /** * 實(shí)現(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(); // 如果縮放后的圖像和要求的圖像寬度一樣,就對(duì)縮放的圖像的高度進(jìn)行截取 if (w == width) { // 計(jì)算X軸坐標(biāo) 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; } } // 否則如果是縮放后的圖像的高度和要求的圖像高度一樣,就對(duì)縮放后的圖像的寬度進(jìn)行截取 else if (h == hight) { // 計(jì)算X軸坐標(biāo) 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; } /** * 實(shí)現(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對(duì)象 * Rectangle 為需要截圖的長(zhǎng)方形坐標(biāo) * saveFile 需要保存的路徑及名稱 * **/ //需要截圖的長(zhǎng)方形坐標(biāo) /*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"); //需要進(jìn)行處理的圖片的路徑 in = new FileInputStream(new File("d:\\ioc\\files\\aaa.jpg")); BufferedImage srcImage = null; //將輸入的數(shù)據(jù)轉(zhuǎn)為BufferedImage對(duì)象 srcImage = ImageIO.read(in); ImageHelper img=new ImageHelper(); img.saveSubImage(srcImage, rect, saveFile);*/ /** * compress 圖片縮放類的使用(縮略圖) * srcImage 為InputStream對(duì)象 * Rectangle 為需要截圖的長(zhǎng)方形坐標(biāo) * 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)用手機(jī)相機(jī)和本地照片上傳圖片到服務(wù)器然后壓縮的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。