整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
html頁面制作中，可以利用 CSS 中的 transform 屬性對圖片進行旋轉，縮放，移動或傾斜的操作。而今天我們只說說 transform 屬性對圖片進行等比例的縮放操作。
transform：該屬性向元素應用 2D 或 3D 轉換。它允許我們對元素進行旋轉、縮放、移動或傾斜的操作。
縮放使用值：
scaleY(n)：對高度進行縮n倍的縮放
scaleX(n)：對寬度進行縮放，n指的是縮放比例
scale(n)：對整體高度和寬度進行縮放，n為縮放的比例，為數字
示例代碼：
transform: scale(2)
scaleX()：可以對元素(圖片)的寬度進行縮放，以下代碼是將原來的圖片的寬度放大了2倍。
示列代碼：
<div class="divimg"> <img src="biao.png" > <br/> <!--寬度縮放--> <img src="biao.png" style="transform:scaleX(2);"> </div>
運行結果：
近做項目時，經常遇到需要圖片緩慢放大的效果。我做的時候想到了幾種方法，所以來總結一下。
1、利用css改變圖片的寬高，做出視覺上的放大。
首先，將圖片寫入html頁面中，給定寬高。
箭頭所指向的就是我們需要變化的圖片。我們需要給定圖片父級盒子的寬高，如上圖。
Tips:
transition用于設置四個過渡屬性。
這四個屬性分別為：
這個屬性要設置在做動畫的元素上。就是“誰”做動畫，“誰”就需要設置過渡屬性。
設置圖片的寬高分別為100%，是為了讓圖片與父級盒子一樣大。這樣當盒子變大時，圖片不會出現偏移的現象。
以上準備工作完成后，我們就需要設置鼠標移動后圖片父級盒子改變到的寬高。
這樣就可以實現鼠標劃過圖片變大的效果了。
當然，同樣也可以直接作用于圖片上，方法還是一樣的。
2、利用jQuery中的css()方法，改變圖片的大小。
同樣將圖片盒子給定寬高。
樣式與方法一相同。
然后我們利用css()方法來改變他的大小。
這樣就可以利用css()方法來改變他的寬高，從而做到圖片的放大效果。
3、利用jQuery中的animate()自定義動畫的方法，改變圖片的大小，實現放大的效果。
要利用這種方式，html與css跟之前是一樣的。
由于animate方法是自定義動畫方法，因此不需要過渡屬性來進行緩動。
此時，頁面上的圖片便會自動放大。
4、利用scale()方法，實現圖片放大的效果。
scale() 方法為畫布的當前變換矩陣添加一個縮放變換。縮放通過獨立的水平和垂直縮放因子來完成。圖片的變化是以中心為基準點來變化的。
這個方法同樣是通過樣式進行改變的。
結構和樣式不需要進行調整。
只需要給圖片盒子加一個transform: scale(1.2);即可 。數值表示放大/縮小的為原始的幾倍。（此時的過渡效果最好還是添加上，可以使圖片變化時感覺更加圓滑流暢）
5、利用css3的keyframe來創建動畫
Keyframe的定義和用法如下：
首先html結構還是一樣，css則需要進行改變。我們需要設定的是動畫后的值。
比如：
接下來我們要設定動畫中css樣式。我將動畫分成了5個階段。每個階段改變他寬高的1/5，連貫下來就會出現動畫的效果。
之所以寫多個，是因為瀏覽器并不完全之前keyframe，因此需要使用每個瀏覽器所支持的不同的寫法。
這是w3c上標明的對于瀏覽器的支持程度。
創建完動畫之后我們就可以直接引用了。只要使用animation就可以搞定了。
第一個值表示動畫的名稱，也就是我們所定義的動畫名稱。第二個值是完成動畫的時間。
給定完畢后，便能夠出現圖片放大的動畫效果了。
原文地址：http://www.gonet.com.cn/webduirshow-124.html
白從寬吧，我就是那個花了兩天兩夜才把 1M 圖片優化到 100kb 的家伙——王小二！
自從因為一篇報道登上熱搜后，我差點抑郁，每天要靠 50 片安眠藥才能入睡。
網絡上曝光的那些關于一碼通的消息，有真有假，我這里就不再澄清了。就說說我是怎么把圖片從 1M 優化到 100kb 的故事吧。
是的，由于系統群體規模和訪問規模的特殊性，每一行代碼、每一張圖片、每一個技術文檔都反復核準，優化再優化，精益求精。為確保系統運行得更高效，我們將一張圖片從1MB壓縮到500KB，再從500KB優化到100KB。
這樣的工作在外人看起來，簡單到就好像悄悄給學妹塞一張情書就能讓她做我女朋友一樣簡單。
但殊不知，這其中蘊含著極高的技術含量！
不信，我給你們普及下。
圖像壓縮是數據壓縮技術在數字圖像上的應用，目的是減少圖像數據中的冗余信息，從而用更加高效的格式存儲和傳輸數據。
圖像壓縮可以是有損數據壓縮，也可以是無損數據壓縮。
怎么樣？
是不是感覺圖像壓縮技術沒有想象中那么簡單了？
作為這次“20 多萬外包項目”的“主力開發人員”，我這里就給大家介紹下 Java 數字圖像處理技術吧，一開始我就是用它來處理圖片的。
數字圖像處理（Digital Image Processing）是通過計算機對圖像進行去除噪聲、增強、復原、分割、提取特征等處理的方法和技術。
輸入的是圖像信號，然后經過 DIP 進行有效的算法處理后，輸出為數字信號。
為了壓縮圖像，我們需要讀取圖像并將其轉換成 BufferedImage 對象，BufferedImage 是 Image 類的一個子類，描述了一個具有可訪問的圖像數據緩沖區，由 ColorModel 和 Raster 的圖像數據組成。
廢話我就不多說了，直接進入實戰吧！
剛好我本地有一張之前用過的封面圖，離 1M 只差 236 KB，可以拿來作為測試用。
這其中要用到 ImageIO 類，這是一個靜態類，提供了一系列方法用來讀和寫圖像，同時還可以對圖像進行簡單的編碼和解碼。
比如說通過 ImageIO.read() 可以將圖像讀取到 BufferedImage 對象：
File input = new File("ceshi.jpg");
BufferedImage image = ImageIO.read(input);比如說通過 ImageIO.getImageWritersByFormatName() 可以返回一個Iterator，其中包含了通過命名格式對圖像進行編碼的 ImageWriter。
Iterator<ImageWriter> writers = ImageIO.getImageWritersByFormatName("jpg");
ImageWriter writer = (ImageWriter) writers.next();比如說通過 ImageIO.createImageOutputStream() 可以創建一個圖像的輸出流對象，有了該對象后就可以通過 ImageWriter.setOutput() 將其設置為輸出流。
File compressedImageFile = new File("bbcompress.jpg");
OutputStream os =new FileOutputStream(compressedImageFile);
ImageOutputStream ios = ImageIO.createImageOutputStream(os);
writer.setOutput(ios);緊接著，可以對 ImageWriter 進行一些參數配置，比如說壓縮模式，壓縮質量等等。
ImageWriteParam param = writer.getDefaultWriteParam();
param.setCompressionMode(ImageWriteParam.MODE_EXPLICIT);
param.setCompressionQuality(0.01f);壓縮模式一共有四種，MODE_EXPLICIT 是其中一種，表示 ImageWriter 可以根據后續的 set 的附加信息進行平鋪和壓縮，比如說接下來的 setCompressionQuality() 方法。
setCompressionQuality() 方法的參數是一個 0-1 之間的數，0.0 表示盡最大程度壓縮，1.0 表示保證圖像質量很重要。對于有損壓縮方案，壓縮質量應該控制文件大小和圖像質量之間的權衡（例如，通過在寫入 JPEG 圖像時選擇量化表）。 對于無損方案，壓縮質量可用于控制文件大小和執行壓縮所需的時間之間的權衡（例如，通過優化行過濾器并在寫入 PNG 圖像時設置 ZLIB 壓縮級別）。
整體代碼如下所示：
public class Demo {
public static void main(String[] args) {
try {
File input = new File("ceshi.jpg");
BufferedImage image = ImageIO.read(input);
Iterator<ImageWriter> writers = ImageIO.getImageWritersByFormatName("jpg");
ImageWriter writer = (ImageWriter) writers.next();
File compressedImageFile = new File("bbcompress.jpg");
OutputStream os = new FileOutputStream(compressedImageFile);
ImageOutputStream ios = ImageIO.createImageOutputStream(os);
writer.setOutput(ios);
ImageWriteParam param = writer.getDefaultWriteParam();
param.setCompressionMode(ImageWriteParam.MODE_EXPLICIT);
param.setCompressionQuality(0.01f);
writer.write(null, new IIOImage(image, null, null), param);
os.close();
ios.close();
writer.dispose();
} catch (IOException e) {
e.printStackTrace();
}
}
}執行壓縮后，可以看到圖片的大小壓縮到了 19 KB：
可以看得出，質量因子為 0.01f 的時候圖片已經有些失真了，可以適當提高質量因子比如說 0.5f，再來看一下。
圖片質量明顯提高了，但大小依然只有 64 KB，壓縮效果還是值得信賴的。
接下來，推薦一些可以輕松集成到項目中的圖像處理庫吧，它們全都是免費的。
1）ImageJ，用 Java 編寫的，可以編輯、分析、處理、保存和打印圖像。
2）Apache Commons Imaging，一個讀取和寫入各種圖像格式的庫，包括快速解析圖像信息（如大小，顏色，空間，ICC配置文件等）和元數據。
3）ImageMagick，可以讀取和寫入超過100種格式的圖像，包括DPX、EXR、GIF、JPEG、JPEG-2000、PDF、PNG、Postscript、SVG和TIFF。還可以調整大小、翻轉、鏡像、旋轉、扭曲、剪切和變換圖像，調整圖像顏色，應用各種特殊效果，包括繪制文本、線條、多邊形、橢圓和貝塞爾曲線。
4）OpenCV，由BSD許可證發布，可以免費學習和商業使用，提供了包括 C/C++、Python 和 Java 等主流編程語言在內的接口。OpenCV 專為計算效率而設計，強調實時應用，可以充分發揮多核處理器的優勢。
這里就以 OpenCV 為例，來演示一下圖像壓縮。當然了，OpenCV 用來壓縮圖像屬于典型的大材小用。
第一步，添加 OpenCV 依賴到我們的項目當中，以 Maven 為例。
<dependency>
<groupId>org.openpnp</groupId>
<artifactId>opencv</artifactId>
<version>4.5.1-2</version>
</dependency>第二步，要想使用 OpenCV，需要先初始化。
OpenCV.loadShared();第三步，使用 OpenCV 讀取圖片。
Mat src = Imgcodecs.imread(imagePath);第四步，使用 OpenCV 壓縮圖片。
MatOfInt dstImage = new MatOfInt(Imgcodecs.IMWRITE_JPEG_QUALITY, 1);
Imgcodecs.imwrite("resized_image.jpg", sourceImage, dstImage);MatOfInt 的構造參數是一個可變參數，第一個參數 IMWRITE_JPEG_QUALITY 表示對圖片的質量進行改變，第二個是質量因子，1-100，值越大表示質量越高。
執行代碼后得到的圖片如下所示：
借這個機會，來對比下 OpenCV 和 JDK 原生 API 在壓縮圖像時所使用的時間。
這是我本機的配置情況，早年買的頂配 iMac，也是我的主力機。一開始只有 16 G 內存，后來加了一個 16 G 內存條，不過最近半年電腦突然死機重啟的頻率明顯提高了，不知道是不是 Big Sur 這個操作系統的問題還是電腦硬件老了。
結果如下所示：
opencvCompress壓縮完成，所花時間：1070
jdkCompress壓縮完成，所花時間：322壓縮后的圖片大小差不多，都是 19 KB，并且質量因子都是最低值。
經過上面的技術分析后，相信你們都明白了，把1M圖片優化到100kb實在是一件“不太容易”的事情。。。。
100KB 很小了吧？只有原來的 1/10。
要知道，我可是連續加班了兩天兩夜，不眠不休。
累到最后，我趴在電腦上都睡著了。
沒想到哈喇子直接給電腦整短路了，我這才算是從夢里面嚇醒來了！
來源：https://www.cnblogs.com/qing-gee/p/15980369.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
