jquery+html 压缩图片

<html>
<heard><title>压缩图片</title><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
</heard><body><form action="RequestServlet" method="post" enctype="application/x-www-form-urlencoded"><input type="file" name="myfile" id="file_t" /></form><button id="submit">提交数据</button><p style="color: red;"><img id="avatar" src="" alt="" style="width: 150px;"></p></body>
<script src="photo.js"></script></html>

photo.js

var image_upload;
$("#submit").click(function(){if(image_upload==null){alert("请选择您的图片哦！！！");}alert(image_upload);
});// 加载原图
$("#file_t").on("change", function (e) {let files = e.target.files;var objUrl = getObjectURL(files[0]);console.log("objUrl = " + objUrl);// if (objUrl) {//     $("#beforeImg").attr("src", objUrl).show();// }test();
});// 加载压缩后的图
function test() {let files = $("#file_t").prop("files");var previewImg = document.querySelector('#afterImg');this.compressImage(files[0],(file) => {image_upload = file;// alert(file);$("#avatar").attr("src", file);},$.noop);
}// 压缩图片
compressImage = (file, success, error) => {// 图片小于1M不压缩if (file.size < Math.pow(1024, 2)) {return success(file);}const name = file.name; //文件名const reader = new FileReader();reader.readAsDataURL(file);reader.onload = (e) => {const src = e.target.result;const img = new Image();img.src = src;img.onload = (e) => {const w = img.width;const h = img.height;const quality = 0.5; // 默认图片质量为0.92// 生成canvasconst canvas = document.createElement("canvas");const ctx = canvas.getContext("2d");// 创建属性节点const anw = document.createAttribute("width");anw.nodeValue = w;const anh = document.createAttribute("height");anh.nodeValue = h;canvas.setAttributeNode(anw);canvas.setAttributeNode(anh);// 铺底色 PNG转JPEG时透明区域会变黑色ctx.fillStyle = "#fff";ctx.fillRect(0, 0, w, h);ctx.drawImage(img, 0, 0, w, h);// quality值越小，所绘制出的图像越模糊const base64 = canvas.toDataURL("image/jpeg", quality); // 图片格式jpeg或webp可以选0-1质量区间success(base64);};img.onerror = (e) => {error(e);};};reader.onerror = (e) => {error(e);};
};//建立一個可存取到該file的url// jquery js 的代码：不同浏览器下的路径function getObjectURL(file) {var url = null;if (window.createObjectURL != undefined) {// basicurl = window.createObjectURL(file);} else if (window.URL != undefined) {// mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) {// webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;
}

参考：
https://github.com/kingwsi/compress-pic/blob/master/index.html

jquery+html 压缩图片相关推荐

jquery压缩图片插件
imageCompress 只有图片压缩功能,比较简单 jquery.imageCompress.js 使用说明: el:为上传框 quality:压缩图片质量,单位为% onloadStart:读取 ...
jquery 前端实现图片压缩和上传
手机端上传图片时,有时候图片会是一张比较大的图片,上传一张的大的图片会消耗比较大的资源影响效率,这个时候就需要对上传的图片进行压缩了.然而图片的压缩有很多种的实现方式,我这里主要是通过画布,拆分瓦片的 ...
js优化上传大图片显示问题（压缩图片展示）
亲测有效,下面是上传后的图片加载时间以及压缩图片加载时间. 一.解决方案上传文件时,发现上传4M的图片,上传时有进度条,但是进度条结束之后,加载图片耗时917ms,当用户焦急的盯着进度条结束后,还要 ...
lrz实现原理_移动端使用localResizeIMG4压缩图片
移动h5开发避免不了上传图片,一般我们使用html自带的控件input或者使用微信上传API.但微信上传API不是任何地方都可以使用的,使用html自带的控件input上传又免不了图片体积太大,上传不 ...
html5 等比压缩图片,HTML5实现input：file上传压缩，等比压缩图片、base64和文件互相转换...
本文实例为你们分享了Vue2.0实现调用摄像头进行拍照功能的具体代码,以及图片上传功能引用exif.js,供你们参考,具体内容以下javascript 插件:html 1.jquery.min.jsv ...
手机端利用JS压缩图片并上传
本人水平有限,如有错误,欢迎指正,谢谢! 思路: 1.手机端选择图片或拍照后,由于体积过大,上传到服务器端后,不仅占用服务器磁盘空间,而且打开速度慢,所以采用前端JS对图片进行压缩后上传. 2.服务器 ...
js 压缩图片及ajax上传图片
js 压缩图片及ajax上传图片 js压缩图片 ajax 上传文件最近做的一个微信活动中需要用到图片上传功能,具体就是用户通过手机拍照上传图片来参与活动.在测试的过程中我们发现上传的图片非常大.我们 ...
Android 高清加载巨图方案拒绝压缩图片
Android 高清加载巨图方案拒绝压缩图片转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/49300989: 本文出自: ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...

jquery+html 压缩图片

jquery+html 压缩图片相关推荐

最新文章

热门文章