當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

jquery+html 压缩图片

發(fā)布時(shí)間：2025/5/22 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery+html 压缩图片小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

photo.js

var image_upload; $("#submit").click(function(){if(image_upload==null){alert("請(qǐng)選擇您的圖片哦！！！");}alert(image_upload); });// 加載原圖 $("#file_t").on("change", function (e) {let files = e.target.files;var objUrl = getObjectURL(files[0]);console.log("objUrl = " + objUrl);// if (objUrl) {// $("#beforeImg").attr("src", objUrl).show();// }test(); });// 加載壓縮后的圖 function test() {let files = $("#file_t").prop("files");var previewImg = document.querySelector('#afterImg');this.compressImage(files[0],(file) => {image_upload = file;// alert(file);$("#avatar").attr("src", file);},$.noop); }// 壓縮圖片 compressImage = (file, success, error) => {// 圖片小于1M不壓縮if (file.size < Math.pow(1024, 2)) {return success(file);}const name = file.name; //文件名const reader = new FileReader();reader.readAsDataURL(file);reader.onload = (e) => {const src = e.target.result;const img = new Image();img.src = src;img.onload = (e) => {const w = img.width;const h = img.height;const quality = 0.5; // 默認(rèn)圖片質(zhì)量為0.92// 生成canvasconst canvas = document.createElement("canvas");const ctx = canvas.getContext("2d");// 創(chuàng)建屬性節(jié)點(diǎn)const anw = document.createAttribute("width");anw.nodeValue = w;const anh = document.createAttribute("height");anh.nodeValue = h;canvas.setAttributeNode(anw);canvas.setAttributeNode(anh);// 鋪底色 PNG轉(zhuǎn)JPEG時(shí)透明區(qū)域會(huì)變黑色ctx.fillStyle = "#fff";ctx.fillRect(0, 0, w, h);ctx.drawImage(img, 0, 0, w, h);// quality值越小，所繪制出的圖像越模糊const base64 = canvas.toDataURL("image/jpeg", quality); // 圖片格式j(luò)peg或webp可以選0-1質(zhì)量區(qū)間success(base64);};img.onerror = (e) => {error(e);};};reader.onerror = (e) => {error(e);}; };//建立一個(gè)可存取到該file的url// jquery js 的代碼：不同瀏覽器下的路徑function getObjectURL(file) {var url = null;if (window.createObjectURL != undefined) {// basicurl = window.createObjectURL(file);} else if (window.URL != undefined) {// mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) {// webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url; }

參考：
https://github.com/kingwsi/compress-pic/blob/master/index.html

總結(jié)

以上是生活随笔為你收集整理的jquery+html 压缩图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。