选择图片，在线图片压缩并下载（纯前端）_图片处理纯前端资源-CSDN文库

共2个文件

js：1个

html：1个

69 浏览量 2023-10-10 10:45:50 上传评论收藏 34KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

在线图片压缩并下载.zip （2个子文件）

index.html 5KB

jquery.min.js 94KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="refresh"> <meta name="Copyright" content="��ͼ��" /> <meta name="description" content="ѧ��͵��߹��Ч��Ч�ķ��" /> <meta content="��ͼ��" name="keywords" /> <base target="_blank"> <title>在线图片压缩并下载</title> </head> <body> <input type="file" id="fileBox" /> <img id="transform" src="" /> <script src="jquery.min.js"></script> <script> var imgSrc; $('#fileBox').change(function(e) { var file=e.target.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function() { console.log(this.result); imgSrc = this.result; $('#transform').attr("src", imgSrc); // ��ú��ͼƬ �� dealImage(imgSrc, { // ע�⣺��pc�˿��þ��·��·��ƶ��þ��·��Ϊ��take photo��ͼƬ·��û��Գɹ��Գɹ��˿��Է��һ�¾��飩�� width: $('#transform').width() }, function(base) { //ֱ�ӽ��ȡ��base64��ַ��ŵ�һ��image��ǩ�оͿɿ��Ժ��ѹ��֮��ʽͼ�� document.getElementById("transform").src = base; img_sourse = base; console.log("大少" + base.length / 1024 + " " + base); }) }; }) var img_sourse; function dealImage(path, obj, callback) { console.log(path); var img = new Image(); img.src = path; img.onload = function() { var that = this; // Ĭ�ϰ��ѹ�� var w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.height || (w / scale); var quality = 1; // Ĭ��ͼƬ��Ϊ0.7 //��canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // ��Խڵ� var anw = document.createAttribute("width"); anw.nodeValue = w; var anh = document.createAttribute("height"); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // ͼ�� if (obj.quality && obj.quality <= 1 && obj.quality > 0) { quality = obj.quality; } // qualityֵԽС��Ƴ��ͼ��Խģ�� var base64 = canvas.toDataURL("image/jpeg").replace("image/jpeg", 'image/octet-stream'); // �ص��base64��ֵ callback(base64); } } //�� function downloadFile(fileName, content) { let aLink = document.createElement('a'); let blob = base64ToBlob(content); //new Blob([content]); let evt = document.createEvent("HTMLEvents"); evt.initEvent("click", true, true); //initEvent ��Ӻ��FF�»ᱨ�� ¼��ͣ��Ƿ�ð�ݣ��Ƿ��ֹ��Ĭ��Ϊ aLink.download = fileName; aLink.href = URL.createObjectURL(blob); // aLink.dispatchEvent(evt); //aLink.click() aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window })); //��ݻ�� } //��ͼƬ function download() { let imgData = img_sourse; downloadFile(Date.parse(new Date())+'.jpeg', imgData); } //base64תblob function base64ToBlob(code) { let parts = code.split(';base64,'); let contentType = parts[0].split(':')[1]; let raw = window.atob(parts[1]); let rawLength = raw.length; let uInt8Array = new Uint8Array(rawLength); for (let i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], { type: contentType }); } </script> <span onclick="download()" href="#" style="color:seagreen;">下载压缩后的图片</span> </body> </html>

评论收藏

内容反馈