利用canvas对图片进行等比例压缩

       <script>var input = document.querySelector("input");var imgArr=[];input.addEventListener("input",function(){var files = this.files;var  isOk= checkStyle(files);//如果为真 则上传图片不符合要求if(isOk){return;}//循环遍历 对图片进行压缩for(var i=0; i<files.length;i++){var imgUrl="";//定义一个初始的路径var fileReader=new FileReader();fileReader.readAsDataURL(files[i]);fileReader.addEventListener("load",function(){var img=new Image();img.src=this.result;img.addEventListener("load",function(){var widht=0;var height=0;if(img.width>img.height){var rate=img.width/img.height;height=500;img.height=img.height>height?height:img.height;img.width=img.height*rate;}else{var rate=img.height/img.width;width=500;img.widht=img.width>width?width:img.width;img.height=img.width*rate;}var canvas=document.createElement("canvas");canvas.width=img.width;canvas.height=img.height;var context=canvas.getContext("2d");//绘制图形context.drawImage(img,0,0,img.width,img.height);//生成一个data64格式的图片路径新的路径imgUrl=canvas.toDataURL("image/jpeg");imgArr.push(imgUrl);var imgBody=document.createElement("img");imgBody.src=imgUrl;document.body.appendChild(imgBody);})})}})//验证 文件格式function checkStyle(files){var reg= /\.(jpg|jpeg|png)$/;var isOk=false;for(var i=0; i<files.length;i++){if(!reg.test(files[i].name)){isOk=true;}}if(isOk){alert("图片格式不正确")}if(files.length>5||imgArr.length+files.length>5){alert("最多只能上传5张图")isOk=true;}return isOk;}
</script>

利用canvas对图片进行等比例压缩相关推荐

对图片进行等比例压缩
1.需要导入的jar包 2.定义类的私有字段 3.有参和无参构造 /** * 无参构造(一般在存在有参构造的情况的需要另写一个无参构造,防止系统将有参构造默认为需要自动执行的方法,防止报错) */ p ...
java canvas 打开图片_一步步教你利用Canvas对图片进行处理
前言 Canvas,中文译为"画布",HTML5中新增了元素,可以结合JavaScript动态地在画布中绘制图形. 今天,我们不讲Canvas的图形绘制,而是讲如何对图片进行处理, ...
html5 自动扣图,利用canvas实现一个抠图小工具
本文作者:IMWeb 孙世吉未经同意,禁止转载利用canvas实现一个抠图小工具 0 前言作为新一代的前端开发工程师,PS抠图切图已经不是必备技能了,我们有UI/交互/视觉等更专业的设计同学帮我 ...
在Ubuntu 16.04.5 LTS上利用python 2.7中的PIL模块智能等比例压缩过大的图片集实操
需求有时候自媒体创作写稿时难免遇到大规模压缩某个文件夹内的图片的情况,通常我们可以使用一些批量压缩的工具来处理,但我觉得,这是小白的做法,对于我们这些经验丰富的老司机来说,使用代码来处理,将是一件高 ...
html5 canvas 椭圆,html5中怎么利用Canvas绘制椭圆
html5中怎么利用Canvas绘制椭圆发布时间:2021-07-08 16:32:10 来源:亿速云阅读:58 作者:Leah html5中怎么利用Canvas绘制椭圆,针对这个问题,这篇文章详 ...
压缩图片大小的java代码_java按比例压缩图片的源代码,用java如何把图片处理到指定大小...
[要分析某个网页中的代码构成,需要某个结点下的内容.用此原始方法可以得到整个网页的源码.其实更简单的方法是使用 WebClient 或 HtmlUtil 等开源方式 .public class Ht ...
利用canvas制作进度条实践
开门见字之前写过一篇H5新标签progress进度条的使用文章,当时觉得研究的还行,但是发现,这个标签在不同浏览器中样式表现是不一致的,如下: chrome中:,一抹蓝色划过天际: 火狐中:,一片绿 ...
在html利用canvas蚂蚁,html5 利用canvas实现简单的人物走动
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...
python(pil)图像处理(等比例压缩、裁剪压缩) 缩略(水印)图
我在这里就不多说了,直接上代码: https://my.oschina.net/neo600/blog/136393 How do I read image data from a URL in Py ...

利用canvas对图片进行等比例压缩

利用canvas对图片进行等比例压缩相关推荐

最新文章

热门文章