100字范文 > 手把手教你实现一个图片压缩工具（Vue与Node的完美配合）

手把手教你实现一个图片压缩工具（Vue与Node的完美配合）

时间：2019-12-14 01:16:54

前言

图片压缩对于我们日常生活来讲，是非常实用的一项功能。有时我们会在在线图片压缩网站上进行压缩，有时会在电脑下软件进行压缩。那么我们能不能用前端的知识来自己实现一个图片压缩工具呢？答案是有的。

效果展示

原图片大小：82KB

压缩后的图片大小：17KB

测试

是不是特别good！！！看到上面的压缩后的图片，可能你还会质疑图片的清晰度，那么看下面（第一张图为压缩后的图片）：

教程

这么好的工具，那我们来看看怎么用代码实现它。首先你可能需要一些Vue.js和Node.js的基础，另外你可能还需要一点对知识的渴望～哈哈哈。

话不多说，我们来上干货。

前台搭建

<template><div class="face"><label for="file" class="inputlabelBox"><inputtype="file"ref="pic"id="file"name="face"accept="image/*"capture="camera":style="{ display: 'none' }"@change="handleClick"/><div class="upload">上传图片</div></label><div class="imgbox" v-show="imgsrc != ''"><img src id="imgs" alt /></div><div><p class="upload" @click="keepImg" v-show="imgsrc != ''">确定</p></div></div></template><script>import EXIF from "exif-js";export default {name: "imgzip",data() {return {imgsrc: "",};},methods: {// 上传图片handleClick() {if (this.$refs.pic.files[0]) {// this.fileToBase64(this.$refs.pic.files[0]).then((res) => {// this.imgsrc = res;// });this.rotateImg(this.$refs.pic.files[0]).then((res) => {this.imgsrc = res;});}},// 压缩和图片旋转rotateImg(imgFile) {return new Promise((resolve) => {EXIF.getData(imgFile, function () {let exifTags = EXIF.getAllTags(this);let reader = new FileReader();reader.readAsDataURL(imgFile);reader.onload = (e) => {let imgData = e.target.result;document.querySelector("#imgs").src = e.target.result;// 8 表示顺时针转了90// 3 表示转了 180// 6 表示逆时针转了90if (exifTags.Orientation == 8 ||exifTags.Orientation == 3 ||exifTags.Orientation == 6) {//翻转//获取原始图片大小const img = new Image();img.src = imgData;img.onload = function () {let cvs = document.createElement("canvas");let ctx = cvs.getContext("2d");//如果旋转90if (exifTags.Orientation == 8 || exifTags.Orientation == 6) {cvs.width = img.height;cvs.height = img.width;} else {cvs.width = img.width;cvs.height = img.height;}if (exifTags.Orientation == 6) {//原图逆时针转了90, 所以要顺时针旋转90ctx.rotate((Math.PI / 180) * 90);ctx.drawImage(img,0,0,img.width,img.height,0,-img.height,img.width,img.height);}if (exifTags.Orientation == 3) {//原图逆时针转了180, 所以顺时针旋转180ctx.rotate((Math.PI / 180) * 180);ctx.drawImage(img,0,0,img.width,img.height,-img.width,-img.height,img.width,img.height);}if (exifTags.Orientation == 8) {//原图顺时针旋转了90, 所以要你时针旋转90ctx.rotate((Math.PI / 180) * -90);ctx.drawImage(img,0,0,img.width,img.height,-img.width,0,img.width,img.height);}let data = cvs.toDataURL("image/jpeg"); // 输出压缩后的base64let arr = data.split(","),mime = arr[0].match(/:(.*?);/)[1], // 转成blobbstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}let files = new window.File([new Blob([u8arr], { type: mime })],"test.jpeg",{ type: "image/jpeg" });resolve(files);};} else {let image = new Image(); //新建一个img标签（还没嵌入DOM节点)image.src = e.target.result;image.onload = function () {let canvas = document.createElement("canvas"), // 新建canvascontext = canvas.getContext("2d"),imageWidth = image.width, //压缩后图片的大小imageHeight = image.height,data = "";canvas.width = imageWidth;canvas.height = imageHeight;context.drawImage(image, 0, 0, imageWidth, imageHeight);data = canvas.toDataURL("image/jpeg"); // 输出压缩后的base64let arr = data.split(","),mime = arr[0].match(/:(.*?);/)[1], // 转成blobbstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}let files = new window.File([new Blob([u8arr], { type: mime })],"test.jpeg",{ type: "image/jpeg" }); // 转成fileresolve(files);};}};});});},/*fileToBase64(file) {let that = this,reader = new FileReader();reader.readAsDataURL(file);return new Promise((resolve, reject) => {reader.onload = function (e) {//这里是一个异步，所以获取数据不好获取在实际项目中，就用new Promise解决if (this.result) {let image = new Image(); //新建一个img标签（还没嵌入DOM节点)image.src = e.target.result;document.querySelector("#imgs").src = e.target.result;image.onload = function () {let canvas = document.createElement("canvas"), // 新建canvascontext = canvas.getContext("2d"),imageWidth = image.width / 2, //压缩后图片的大小imageHeight = image.height / 2,data = "";canvas.width = imageWidth;canvas.height = imageHeight;context.drawImage(image, 0, 0, imageWidth, imageHeight);data = canvas.toDataURL("image/jpeg"); // 输出压缩后的base64let arr = data.split(","),mime = arr[0].match(/:(.*?);/)[1], // 转成blobbstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}let files = new window.File([new Blob([u8arr], { type: mime })],"test.jpeg",{ type: "image/jpeg" }); // 转成fileresolve(files);};} else {reject("err");}};});},*/// 保存图片keepImg() {// this.$emit("canvasToImage", this.imgsrc);const fd = new FormData();fd.append("file", this.imgsrc);fetch("http://localhost:6300/upload", {method: "post",mode:"cors",body:fd,}).then((response) => response.json()).then((response) => {if(response.success){console.log(this.imgsrc);const size = this.imgsrc.size<1024?this.imgsrc.size+"字节":Math.round(this.imgsrc.size/1024)+"KB";console.log(size);alert(`图片${response.name}${response.msg}！压缩后图片大小为：${size}。`);}}).catch((err) => {console.log(err);});},},};</script><style scoped lang="less">.upload {display: inline-block;background: #ffb90f;color: white;font-size: 16px;text-align: center;border-radius: 4px;padding: 10px 30px;margin-bottom: 20px;}.upload:hover {filter: brightness(110%);}.upload:active {filter: brightness(60%);}.imgbox {text-align: center;width: 60%;margin: 0 auto;img {width: 100%;height: 60vh;object-fit: contain;}}.face {margin-top: 30px;.container1 {background: #000;position: relative;width: 580px;height: 436px;margin: 0 auto;#canvas1 {position: absolute;}video,#canvas,#canvas1 {position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 581px;height: 436px;}}.btns {padding: 10px;button {margin: 20px 20px 20px 0;}}.tips {font-size: 26px;color: #666;margin: 10px 0;line-height: 48px;}.imgs {p {font-size: 28px;}}}</style>

我在这里实现了一个Vue组件（所以你得知道Vue是什么？组件又是什么？）。知道这些还不够，你还要知道怎么从依赖库下载依赖，这里需要另外下载的依赖是exif-js。