HTML实现纯前端压缩图片

演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>压缩图片</title>
</head>
<body>
<input id='file' type="file">
<script>var eleFile = document.querySelector('#file')var file;var render = new FileReader(), img = new Image();render.onload = function(e) {img.src = e.target.result}// 获取图片文件eleFile.addEventListener('change', function(e) {file = e.target.files[0];if(file.type.indexOf('image') === 0) {//读取文件，并返回一个URL格式的Base64字符串render.readAsDataURL(file)}})//使用canvas把图片画出来var canvas = document.createElement('canvas');var context = canvas.getContext('2d');img.onload = function() {//原始尺寸var originWidth = this.width;var originHeight = this.height;//最大尺寸限制var maxWidth = 200, maxHeight = 200// 目标尺寸var targetWidth = originWidth, targetHeight = originHeight;//当原始尺寸大于200*200时候if(originWidth > maxWidth || originHeight > maxHeight) {if(originWidth / originHeight > maxWidth / maxHeight) {//更宽targetWidth = maxWidth;targetHeight = Math.round(maxWidth * (originHeight / originWidth))}else {targetHeight = maxHeight;targetWidth = Math.round(maxHeight * (originWidth / originHeight))}}//画图canvas.width = targetWidth;canvas.height = targetHeight;//清除画布context.clearRect(0,0,targetWidth, targetHeight)//图片压缩context.drawImage(img, 0, 0, targetWidth, targetHeight);//canvas 转为blob并上传canvas.toBlob(function(blob) {try {var xhr = new XMLHttpRequest();xhr.onreadystatechange = function() {{if(xhr.status == 200) {}}}//开始上传xhr.open('POST','upload.php', true);xhr.send(blob)} catch (error) {console.log(error)}}, file.type || 'image/png')//在页面预览原图片var div1 = document.createElement('div')div1.innerText = '原图：'document.body.appendChild(div1)document.body.appendChild(img)//canvas预览var div2 = document.createElement('div')div2.innerText = 'canvas图：'document.body.appendChild(div2)document.body.appendChild(canvas)}</script>
</body>
</html>

分析：原理是用canvas的生成的图片，控制其大小来进行图片的压缩，需要注意的是，如果图片的尺寸太小，会导致图片模糊，使用时候，注意设置其比例控制。

1、通过FileReader读取图片文件，用 Image来装图片url（可以用来预览）
2、转化成base64字符串模式
3、通过maxWidth,MaxHeight和比例来控制最终的canvas的宽高 4、用canvas画图
5、在把canvas输出blob文件，进行上传

HTML实现纯前端压缩图片相关推荐

cropper.js 图像旋转问题_JavaScript开源良心插件，纯前端网页图片剪裁插件——cropperjs...
介绍 cropperjs是一款基于JavaScript的网页端图片裁剪插件,可能相对于图片预览来说,图片的裁剪使用场景貌似并不是很多,但是图片预览插件又要比裁剪插件容易找到,而且从实现难度上来说也不及 ...
vue：前端压缩图片上传
网上关于vue前端压缩图片后再上传到的代码很多,大家可以一试~ compressImage.js文件 // 压缩图片 export function compressImage({ file, con ...
纯前端实现图片上传功能
纯前端实现图片上传功能,告别后端formData上传使用ElementUI中的upload组件+腾讯云实现简单的图片上传功能了解了upload的基本属性之后我们要开始上硬菜了使用ElementU ...
前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例
前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例本博没有新的东西, 都是东拼西凑的. 但是, 组合出了个宝贝, 包括: 文件类型/宽高/大小的校验, 还有展示图片参照 ...
JS魔法堂之实战：纯前端的图片预览
一.前言图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的 onchange事件,一旦更改路径则将图片上传至 ...
纯前端实现图片背景透明化
前言不论是做一些2d的小游戏,或者制作小图标,或者抠图都需要用到这个功能,对图片的背景进行透明化,是我们经常需要用到的一个功能. 通常情况下我们都会去下载PS或者美图秀秀这样的软件去制作. 但是我真 ...
使用squoosh网的压缩方法实现浏览器前端压缩图片功能
假如说你做的网站有需要用户自定义上传图片的功能,那么往往这些图片,都需要进行压缩,且往往是需要经过服务器端压缩的.同时如果说你不懂图片压缩原理的话,你还得去花钱使用他人的API进行图片压缩(例如tin ...
前端压缩图片 tinypng
前端写页面,很多时候会引入大量的图片,网页打开的时候加载速度就会成为一个问题, 尤其是在目前的移动端(未来网速大幅提升的情况下会好很多),现在这样的情况下压缩图片是很好的选择,可以加快网页打开的速度 ...
差值平方和匹配_纯前端实现图片的模板匹配
基础介绍模板匹配是指在当前图像A里寻找与图像B最相似的部分,本文中将图像A称为模板图像,将图像B称为搜索匹配图像. 引言:一般在Opencv里实现此种功能非常方便:直接调用 result = cv2 ...

HTML实现纯前端压缩图片

演示

HTML实现纯前端压缩图片相关推荐

最新文章

热门文章