資訊專欄INFORMATION COLUMN
摘要：選擇一張圖片圖片原始寬高圖片原始大小使用壓縮壓縮到圖片原始寬高的一半壓縮后質(zhì)量壓縮后的圖片大小預(yù)覽壓縮后的圖片保存到本地在線
1. 選擇一張圖片
const img_original = document.getElementById("img_original");
const img_output = document.getElementById("img_output");
let blob;
function preview(file) {
let reader = new FileReader();
reader.onload = function () {
img_original.src = this.result;
img_original.onload = () => {
console.log("圖片原始寬高:", img_original.naturalWidth, img_original.naturalHeight);
console.log("圖片原始大小:", file.size)
}
};
reader.readAsDataURL(file);
}
2. 使用Canvas壓縮
function compress() {
// 壓縮到圖片原始寬高的一半
let w = img_original.naturalWidth / 2;
let h = img_original.naturalHeight / 2;
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let anw = document.createAttribute("width");
anw.nodeValue = w;
let anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.fillRect(0, 0, w, h);
ctx.drawImage(img_original, 0, 0, w, h);
const base64 = canvas.toDataURL("image/jpeg", 0.75);// 壓縮后質(zhì)量
const bytes = window.atob(base64.split(",")[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
blob = new Blob([ab], {type: "image/jpeg"});
console.log("壓縮后的圖片大小", blob.size);
// 預(yù)覽壓縮后的圖片
img_output.src = base64
}
3. 保存到本地
function save() {
if (blob) {
let a = document.createElement("a");
let event = new MouseEvent("click");
a.download = Math.round(new Date() / 1000) + ".jpg";
a.href = URL.createObjectURL(blob);
a.dispatchEvent(event)
}
}
在線DEMOhttps://oktools.net/image-compress
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/106212.html
摘要：選擇一張圖片圖片原始寬高圖片原始大小使用壓縮壓縮到圖片原始寬高的一半壓縮后質(zhì)量壓縮后的圖片大小預(yù)覽壓縮后的圖片保存到本地在線 1. 選擇一張圖片 const img_original = document.getElementById(img_original); const img_output = document.getElementById(img_outpu...
摘要：中的圖片處理與合成一引言圖片處理現(xiàn)在已經(jīng)成為了我們生活中的剛需，想必大家也經(jīng)常有這方面的需求。實(shí)際前端業(yè)務(wù)中，也經(jīng)常會(huì)有很多的項(xiàng)目需要用到圖片加工和處理。 JavaScript中的圖片處理與合成(一) 引言： 圖片處理現(xiàn)在已經(jīng)成為了我們生活中的剛需，想必大家也經(jīng)常有這方面的需求。實(shí)際前端業(yè)務(wù)中，也經(jīng)常會(huì)有很多的項(xiàng)目需要用到圖片加工和處理。由于過去一段時(shí)間公司的業(yè)務(wù)需求，讓我在這方面積累...
摘要：對(duì)于廣大的前端開發(fā)人員來說，網(wǎng)站構(gòu)建本是家常便飯其中也不得不涉及到性能優(yōu)化的問題。將不影響首屏的資源和當(dāng)前屏幕資源不用的資源放到用戶需要時(shí)才加載，可以大大提升重要資源的顯示速度和降低總體流量按需加載會(huì)導(dǎo)致大量重繪，影響渲染性能。對(duì)于廣大的前端開發(fā)人員來說，網(wǎng)站構(gòu)建本是家常便飯；其中也不得不涉及到性能優(yōu)化的問題。之前也有接觸過，今天總結(jié)一下這方面的技巧，下面是我的一下認(rèn)知，歡迎探討： ? Nu...
閱讀 3436·2021-09-26 09:46
閱讀 2785·2021-09-13 10:23
閱讀 3519·2021-09-07 10:24
閱讀 2392·2019-08-29 13:20
閱讀 2922·2019-08-28 17:57
閱讀 3074·2019-08-26 13:27
閱讀 1179·2019-08-26 12:09
閱讀 510·2019-08-26 10:27
