压缩思路

JS 的图片压缩，一般是需要用到 Canvas 的绘图能力，通过调整图片的分辨率或者绘图质量来达到图片压缩的效果。

实现过程

（1）获取上传 Input 中的图片对象 File；

（2）将图片转换成 base64 格式；

（3）base64 编码的图片通过 Canvas 转换压缩，这里会用到的 Canvas 的 drawImage 以及 toDataURL 这两个 Api，一个调节图片的分辨率的，一个是调节图片压缩质量并且输出的，后续会有详细介绍
转换后的图片生成对应的新图片，然后输出。

优缺点介绍

不过 Canvas 压缩的方式也有着自己的优缺点：

优点：实现简单，参数可以配置化，自定义图片的尺寸，指定区域裁剪等等。

缺点：只有 jpeg 、webp 支持原图尺寸下图片质量的调整来达到压缩图片的效果，其他图片格式，仅能通过调节尺寸来实现

具体实现代码

<template><div class="container"><input type="file" id="input-img" @change="compress" /><a :download="fileName" :href="compressImg">下载图片</a><!-- <button @click="downloadImg">兼容 IE 下载</button> --><div><img :src="compressImg" /></div></div>
</template>
<script>
export default {name: 'compress',data: function () {return {compressImg: null,fileName: null,};},components: {},methods: {compress () {// 获取上传的图片对象// 将图片转换成 base64 格式// base64 编码的图片通过 Canvas 转换压缩，这里会用到的 Canvas 的 drawImage 以及 toDataURL 这两个 Api，一个调节图片的分辨率的，一个是调节图片压缩质量并且输出的，后续会有详细介绍// 转换后的图片生成对应的新图片，然后输出// 获取文件对象const fileObj = document.querySelector('#input-img').files[0];// 获取文件名称，后续下载重命名this.fileName = `${fileObj.name}-${new Date().getTime()}`;// 获取文件后缀名const fileNames = fileObj.name.split('.');const type = fileNames[fileNames.length - 1];// 压缩图片this.handleCompressImage(fileObj, type);},handleCompressImage (img, type) {const vm = this;let reader = new FileReader();// 读取文件reader.readAsDataURL(img); // 转base64reader.onload = (e) => {let image = new Image()     // 新建一个img标签（不嵌入DOM节点，仅做canvas操作)image.src = e.target.result    // 让该标签加载base64格式的原图image.onload = function () {    //图片加载完毕后再通过canvas压缩图片，否则图片还没加载完就压缩，结果图片是全黑的let canvas = document.createElement('canvas') //创建一个canvas元素let context = canvas.getContext('2d')    //context相当于画笔，里面有各种可以进行绘图的API// 定义 canvas 大小，也就是压缩后下载的图片大小let imageWidth = image.width; // 压缩后图片的宽度let imageHeight = image.height; // 压缩后图片的高度// 图片也可以按照指定压缩尺寸进行压缩// let imageWidth = 500; // 压缩后图片的宽度// let imageHeight = 500; // 压缩后图片的高度canvas.width = imageWidth;canvas.height = imageHeight;// 使用drawImage重新设置img标签中的图片大小，实现压缩context.drawImage(image, 0, 0, imageWidth, imageHeight)// 图片截取指定位置载入// context.drawImage(image,100, 100, 100, 100, 0, 0, imageWidth, imageHeight);vm.compressImg = canvas.toDataURL(`image/${type}`); // 输出压缩后的base64};};},// base64 图片转 blob 后下载downloadImg () {let parts = this.compressImg.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);}const blob = new Blob([uInt8Array], { type: contentType });this.compressImg = URL.createObjectURL(blob);if (window.navigator.msSaveOrOpenBlob) {// 兼容 ie 的下载方式window.navigator.msSaveOrOpenBlob(blob, this.fileName)} else {const a = document.createElement('a');a.href = this.compressImg;a.setAttribute('download', this.fileName);a.click();}},}
};
</script>

JavaScript 使用canvas压缩图片相关推荐

android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
canvas压缩图片或者进行视频抓拍
最近在项目中遇到一个需要抓拍正在播放的视频中的图片,就像截图一样进行实时抓拍,并且使用了base64进行上传,要求图片不能大于2M. 先上代码 public captureVideo(id) {//获 ...
canvas压缩图片的秘密
开篇首先明确canvas只适合压缩大的图片,图片size过小并不能有什么用处.那么为什么size过小canvas并不能压缩呢如果不压缩质量,经过canvas的图片变大了图片在经过img标签的时候 ...
JavaScript前端实现压缩图片功能
通过原生的input标签拿到要上传的图片文件将图片文件转化成img元素标签在canvas上压缩绘制该HTMLImageElement 将canvas绘制的图像转成blob文件最后将该blob文件 ...
使用html5+的plus调起相机拍照，使用canvas压缩图片，转成base64传到后台
html代码: <div class="form-com door"><label for="">门头照:</label>& ...
canvas 压缩图片上传
问题:前端开发过程中难免会将数据提交到后台,但若是提交的数据过大,特别上传图片这类需求,如果不对上传的图片进行压缩处理,就难免会出现请求时间过长的情况,对于用户体验肯定就不是太友好,那么这时候该如何将 ...
前台图片Canvas压缩上传小结
需求来源:之前有个提交审核表单的业务,表单中含有大量附件图片,大约有20多张吧,为了省事,采用的同步上传,一次需要上传很多照片,本来单张图片限制为200KB,这样子总图片大小约为5MB左右,想想也可以 ...
图片上传时用Canvas 压缩和加水印
用菜鸟教程模拟的菜鸟对应链接 https://www.runoob.com/try/try-cdnjs.php?filename=tryhtml5_canvas_tut_img <!DOCTY ...
html5在图片中加链接,JavaScript、html5、canvas实现图片上画超链接
本文主要为大家详细介绍了JavaScript html5 canvas实现图片上画超链接,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 1. html 2. javascrip ...

JavaScript 使用canvas压缩图片

压缩思路

实现过程

优缺点介绍

具体实现代码

JavaScript 使用canvas压缩图片相关推荐

最新文章

热门文章