input上传图片压缩

最新推荐文章于 2022-11-23 08:00:00 发布
最新推荐文章于 2022-11-23 08:00:00 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010914880/article/details/103287937
版权
js 同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
html
1 篇文章 0 订阅
订阅专栏 
<html>
	<input type="file" id="file" onchange="upload()"/>
</html>

<script>
function upload(){
   var file = document.getElementById('file');
   var reader = new FileReader(file);
   reader.onload = function(e){
		var image = new Image();
		image.src = this.result;
		image.onload = function(){
		    var canvas = document.createElement('canvas'), 
            context = 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')  //这里是图片
		}
	}
}
</script>
fly_gaozhe
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 input file 图片上传，压缩，上传，预览
qq_16591861的博客
07-03 3385
上传 预览框 $('#textfile').on('change', function() {         var reader = new FileReader();//新建获取file的读取文件         var imgsrc = null;          var _file = this.files[0],  //获取的的图片             f
input file属性上传压缩图片
qq_37111820的博客
11-05 979
input上传压缩图片 参考链接: link 代码展示 //点击事件 //压缩的思路是创建一个图片，将file等于这个图片，然后创建一个canvas图层将canvas等比例缩放， //然后用canvas的drawImage将图片与canvas合起来，然后在转成吧canvas的base64转成file即可 $("#test").unbind().change(function () { // 选择的文件对象 var file = $(".test")[0].files[0]; //取消
input上传图片前压缩
dcl199728的博客
03-26 1214
input上传图片前进行压缩
input file 上传图片及压缩
weixin_45021098的博客
05-19 1566
VUE3.0大概总结判断浏览器判断ie为某个版本鉴别PC及移动端 判断浏览器 判断浏览器时我们需要用到navigator.userAgent navigator是一个对象，他包含了有关浏览器的信息 userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。 例如：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322) 完整的代码为var explorer = navigator
前端图片压缩解决办法
qq_44588612的博客
11-23 5418
本篇文章提供前端图片压缩的方法
前端图片压缩并上传
yihanzhi的博客
05-07 1528
一、简述 移动端压缩图片并且上传主要用到filereader、canvas 以及 formdata 这三个h5的api。 整个过程概述为三步： 　　1、用户使用input file上传图片的时候，用filereader读取用户上传的图片数据（base64格式） 　　2、把图片数据传入img对象，然后将img绘制到canvas上，再调用canvas.toDataURL对图片进行压缩 　　3、获取到压...
input 上传拍照，压缩图片与旋转图片（ios）
weixin_43878003的博客
07-31 1082
压缩图片与旋转图片 inputFileChange: function (event, index, listIndex) { var self = this; var file = event.target.files[0]; var ele = event.target; var Orie...
H5 图片压缩上传
jjting的专栏
11-08 3986
H5活动已十分普遍，其中一种形式是让用户上传图片进行参与。移动端上传图片，用户一般都是上传手机相册中的图片，而现在手机的拍摄质量越来越高，一般单张照片的尺寸都在3M左右。若直接上传，十分耗流量，并且体验效果也不佳。因此需要在上传之前，先进行本地压缩。接下来总结在h5活动的开发中图片压缩上传的功能，并标记其中踩过的几个坑，分享给大家：小白区必看对于移动端图片上传毫无概念的话，需要补充FileReade
js实现图片压缩上传
前端~锋小张
04-02 5336
javascript 处理图片压缩和上传 最近在研究H5前端图片处理相关技术，方向有图片压缩、裁切、旋转、模糊等，现在已经整理成对应的demo，上传至github。下载即用，欢迎大家参考和指导。 一：js脚本实现图片压缩 -CompressImageUtiles 特点：1 体积小，4kb；2 支持blob格式上传和base64格式上传 原图 5.4MB ...
H5图片压缩与上传
01-17
在图片压缩的过程中，我们首先通过`<input type="file">`元素让用户选择图片文件，当用户选择图片后，会触发change事件。在事件处理器中，我们可以使用FileReader API读取图片文件，将其转化为Blob对象。 接下来，...
Element 图片上传封装图片质量压缩上传
10-12
因此，为了满足这一需求，我们需要对其进行二次封装，以便在用户上传图片之前对其进行压缩。 图片质量压缩是通过调整图片的位深度、颜色模式和编码方式来减小文件大小的一种方法。在JavaScript中，我们可以利用...
H5图片压缩与上传实例
11-28
在本实例中，我们将探讨如何使用HTML5的Canvas API进行图片压缩，并将其与上传功能相结合。这个问题的起因是由于某些图片文件过大，导致上传至服务器时速度缓慢，因此在前端进行压缩成为了解决方案。 前端图片压缩...
js input上传文件可input上传图片
10-30
在JavaScript中，`<input ...总结，使用JavaScript的`<input type="file">`结合FileReader、FormData和Fetch API，可以实现图片的选取、预览和上传功能。在实际开发中，还需要注意安全性、用户体验和性能优化等方面。
图片上传压缩裁剪.zip
05-24
- 这样的功能常见于社交网络、电子商务、在线相册等，用户可以上传图片并自定义展示部分，同时减轻服务器存储和传输的压力。 综上所述，"图片上传压缩裁剪.zip"提供了一个完整的解决方案，帮助开发者快速实现图片...
pillow-10.4.0-pp39-pypy39_pp73-macosx_11_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
avif-0.5.0-cp35-cp35m-macosx_10_9_x86_64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
pillow-10.4.0-cp39-cp39-musllinux_1_2_x86_64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
1250KVA本体基础图11
最新发布
07-27
1250KVA本体基础图11
input上传图片很卡
12-30
input上传图片卡顿的问题可能是由于上传的图片过大或者网络不稳定导致的。以下是两种解决方法： 1. 压缩图片大小：可以使用第三方库或者前端技术来压缩上传的图片，减小图片的大小，从而提高上传速度。例如使用JavaScript的canvas来进行图片压缩： ```javascript function compressImage(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = function(event) { const img = new Image(); img.onload = function() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, img.width, img.height); canvas.toBlob(function(blob) { resolve(blob); }, file.type); }; img.src = event.target.result; }; reader.readAsDataURL(file); }); } // 使用示例 const inputElement = document.getElementById('file-input'); inputElement.addEventListener('change', async function(event) { const file = event.target.files[0]; const compressedFile = await compressImage(file); // 将压缩后的文件上传 }); ``` 2. 使用分片上传：将大文件分成多个小块进行上传，可以提高上传速度并且可以在上传失败时进行断点续传。可以使用第三方库或者后端技术来实现分片上传。例如使用JavaScript的FormData和XMLHttpRequest来实现： ```javascript const inputElement = document.getElementById('file-input'); inputElement.addEventListener('change', function(event) { const file = event.target.files[0]; const chunkSize = 1024 * 1024; // 每个分片的大小，这里设置为1MB const totalChunks = Math.ceil(file.size / chunkSize); // 总分片数 let currentChunk = 0; // 当前上传的分片索引 function uploadChunk() { const start = currentChunk * chunkSize; const end = Math.min(start + chunkSize, file.size); const chunk = file.slice(start, end); const formData = new FormData(); formData.append('file', chunk); formData.append('chunk', currentChunk); formData.append('totalChunks', totalChunks); const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.onload = function() { if (xhr.status === 200) { currentChunk++; if (currentChunk < totalChunks) { uploadChunk(); } else { // 上传完成 } } else { // 上传失败 } }; xhr.send(formData); } uploadChunk(); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值