前端修改input上传的图片大小

最新推荐文章于 2024-05-25 11:22:02 发布
最新推荐文章于 2024-05-25 11:22:02 发布
阅读量4.9k 收藏 4
点赞数
分类专栏： canvas 文章标签： canvas 图片压缩
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/impossible1994727/article/details/89091940
版权

我的本意是压缩图片的质量，一不小心写成了修改图片的宽高；

1、HTML部分代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>

</head>

<body>
    <div>
        <input type="file" name="" id="upload_img">
        <img src="" alt="" id="upload_img_preview">
    </div>
</body>
<script>
   
</script>
<script src="js/a.js"></script>
</html>

2、js部分代码：

在这里面用到了图片加载（img.onload）,fileReader接口读取文件，canvas画图技术，

首先，给input添加监

最低0.47元/天 解锁文章
impossible1994727
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE 图片上传-前端
11-20
5. **图片格式和大小限制**：为了保证上传的图片符合服务器要求，前端可以对图片格式和大小进行初步校验。例如，限制只能上传.jpg、.png等常见格式，或者限制文件大小不超过一定值。 6. **表单数据序列化**：在提交...
input file图片上传， js 对图片尺寸进行等比例压缩处理
qq_41786458的博客
05-16 3518
//file 上传图片，绑定change事件 <input type="file" onChange="uploadPic(this)" accept="image/*" /> function uploadPic(e) { var file = e.files[0]; function callback(data){//回调获取压缩后的Blog ...
html5 等比压缩图片,HTML5实现input：file上传压缩，等比压缩图片、base64和文件互相转换...
weixin_35676444的博客
06-03 360
本文实例为你们分享了Vue2.0实现调用摄像头进行拍照功能的具体代码，以及图片上传功能引用exif.js，供你们参考，具体内容以下javascript插件：html1.jquery.min.jsvue2.exif.jsjava效果目标：实现等比例压缩上传jquery上代码iosHTMLajax.bgred{background-color: red;color: #fff !important;}...
前端如何判断上传图片尺寸（宽度和高度）
最新发布
gaotlantis的博客
05-25 459
在上传图片时，存在需要判断图片的宽高是否符合需求的场景（如指定Icon尺寸）。那么前端如何判断上传图片尺寸（宽度和高度）？
上传图片时如何在前端限制图片的大小，获取图片的名称
中国程序猿
07-31 4961
首先，上传的表单为： &lt;el-form-item label="*商品图片："&gt; &lt;p&gt;上传商品首页广告轮播图，您最多可以上传6张图片，每张图片大小不可超过200kb，默认第一张为商品主图封面。&lt;/p&gt; &lt;p&gt;建议上传至少3张以上，推荐使用500*500像素的真实图片，支持jpg，jepg，png，gif，bmp格式。&lt;/p&gt; ...
js 上传图片 大小控制
小亮子的博客
09-13 660
js 原生态 上传图片 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &
input上传图片并同步获取图片分辨率
Twinkle_sone的博客
06-16 2416
作为一名前端开发，页面交互少不了图片上传，但有时候我们需要对上传图片做一些限制，如尺寸要求和像素分辨率要求，所以这里我们一起来看看前端上传图片如何获取图片的分辨率。
PHPCMS 修改flash附件上传 改为H5上传
07-23
PHPCMS是一款流行的开源内容管理系统，它为网站开发者提供了丰富的功能，包括文章发布、图片管理、文件上传等。然而，随着技术的发展，Adobe Flash逐渐被淘汰，尤其是谷歌浏览器已经不再支持Flash，这使得基于Flash...
html5点击修改头像上传图片裁剪代码
11-07
通过这些技术，我们可以创建出一个直观且用户友好的头像修改功能，让用户能够轻松上传和裁剪图片，提升网站或应用的用户体验。在实际开发过程中，还需要注意跨浏览器兼容性，确保功能在不同环境下都能正常工作。
jQuery上传图片前端代码
05-06
在这个场景中，我们关注的是“jQuery上传图片前端代码”，这是一种允许用户在Web应用中上传图片的技术，通常与后台服务配合，实现图片的存储。以下是关于这个主题的详细知识： 1. **jQuery基本概念**： - jQuery是...
ko.tar.gz_文件上传前端
09-24
描述中提到的"文件上传功能"涉及到多个前端技术知识点，如HTML5的`<input type="file">`标签用于创建文件选择器，File API用于在浏览器中读取和操作文件，以及Ajax或Fetch API用于异步发送文件到服务器。此外，还...
使用input标签上传文件，限制图片尺寸
可乐加冰的博客
07-16 1367
在使用input标签上传图片时，如何限制图片的尺寸
input file图片压缩踩坑
小菜鸡程序媛的挣扎史
09-29 780
<!--调用canvas方法--> <canvas id="canvas"></canvas> <!--压缩后的图片路劲--> <img src="" class="preview"> <img src="" class="preview"> <!--原图压缩--> <img class="source" ...
input file属性上传压缩图片
qq_37111820的博客
11-05 973
input上传压缩图片 参考链接: link 代码展示 //点击事件 //压缩的思路是创建一个图片，将file等于这个图片，然后创建一个canvas图层将canvas等比例缩放， //然后用canvas的drawImage将图片与canvas合起来，然后在转成吧canvas的base64转成file即可 $("#test").unbind().change(function () { // 选择的文件对象 var file = $(".test")[0].files[0]; //取消
前端图片最优化压缩方案
qq_25983505的博客
06-30 2389
前端图片最优化压缩方案 凉城a前端复习课1周前 前言 上传图片/视频/文件是我们经常会遇到的问题，但是一旦图片过大就会导致不好的操作体验。图片上传是前端中常见的的业务场景。无论是前台还是后台，适当的对图片进行压缩处理， 可以显著的提升用户体验。而在后台管理系统中，图片压缩不仅仅能够提升后台管理员操作体验，更是可以防止后台设置过大的图片导致前台图片加载过久，从而影响用户体验。 关于压缩图片 思考 想想压缩图片基本流程 input 读取到 文件 ，使用 FileReader 将其转换为 b..
前端实现图片压缩上传功能
EarlEcho
04-12 4730
以移动端为例，在H5上传图片时，由于机型 / 网速 / 流量等限制，在低版本机型上经常会出现上传的图片太大导致上传很慢甚至崩溃的情况，所以需要对在某些情况下需要对上传的图片进行压缩上传。 以下以移动端使用Vue框架为例： （以下主要实现思路来自张鑫旭大神的博客：
input标签获取图片文件尺寸
坤小的专栏
12-02 7128
思路分析 （1）给input标签设置一个onchange事件 当input标签的type属性为file时，我们可以给该input标签设置一个onchange事件来监听文件选择的变化 （2）在onchange事件中使用FileReader读取选取文件的信息 FileReader类支持异步读取input标签文件信息（大小，时间，数据等） （3）使用一个img标签来显示获取的图片（如果不需要显示可以
js 图片压缩上传（base64位）以及上传类型分类
weixin_30216561的博客
01-02 99
一、input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input type="file" multiple accept='image/*'> 3.指明调用摄像头获取图片 <input type="file" capture='camera...
前端图片压缩解决办法
qq_44588612的博客
11-23 5377
本篇文章提供前端图片压缩的方法
js 压缩html 图片上传,js canvas 前端实现修改图片尺寸压缩图片大小
05-17
压缩HTML： 可以使用多种工具来压缩HTML，例如HTMLMinifier或UglifyJS等。这些工具可以删除不必要的空格、注释和其他字符，从而减小文件大小。以下是使用HTMLMinifier进行HTML压缩的示例代码： ```javascript const html = '<html><head><title>Hello World</title></head><body><p>Hello, world!</p></body></html>'; const minifiedHtml = htmlMinifier.minify(html, { collapseWhitespace: true, removeComments: true, minifyCSS: true, minifyJS: true }); ``` 图片上传： 可以使用HTML5的File API来实现图片上传。以下是一个基本的示例： ```html <input type="file" id="upload-input"> <script> const input = document.getElementById('upload-input'); input.addEventListener('change', (e) => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const imageData = event.target.result; // 图片数据 // 将图片数据上传到服务器 }; reader.readAsDataURL(file); }); </script> ``` JS Canvas 修改图片尺寸和压缩大小： 可以使用canvas的API来修改图片的尺寸和压缩图片大小。以下是一个基本的示例： ```html <input type="file" id="upload-input"> <canvas id="canvas"></canvas> <script> const input = document.getElementById('upload-input'); const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); input.addEventListener('change', (e) => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const img = new Image(); img.onload = () => { // 计算缩小后的尺寸 const maxWidth = 300; const maxHeight = 300; let width = img.width; let height = img.height; if (width > height) { if (width > maxWidth) { height *= maxWidth / width; width = maxWidth; } } else { if (height > maxHeight) { width *= maxHeight / height; height = maxHeight; } } canvas.width = width; canvas.height = height; // 绘制缩小后的图片 context.drawImage(img, 0, 0, width, height); // 压缩图片 const quality = 0.7; const imageData = canvas.toDataURL('image/jpeg', quality); // 将图片数据上传到服务器 }; img.src = event.target.result; }; reader.readAsDataURL(file); }); </script> ``` 以上是一个基本的实现，具体的实现方式可以根据需求进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值