html5前端图片压缩，大小可配置

/***思路：创建一个HTML5 Canvas画布自定义大小，将图片传入，再获取画布内容。简单粗暴有效！ ****//**  2016年3月3日* 图片压缩，大仙造* 技术交流495120021* @param fil* @param id*/function getUrl(fil, id) {var Cnv = document.getElementById('myCanvas');var Cntx = Cnv.getContext('2d');//获取2d编辑容器var imgss =   new Image();var agoimg=document.getElementById("ago");for (var intI = 0; intI < fil.length; intI++) {var tmpFile = fil[intI];var reader = new FileReader();reader.readAsDataURL(tmpFile);reader.onload = function (e) {url = e.target.result;imgss.src = url;agoimg.src=url;agoimg.onload = function () {//等比缩放var m = imgss.width / imgss.height;Cnv.height =300;//该值影响缩放后图片的大小Cnv.width= 300*m ;//img放入画布中//设置起始坐标，结束坐标Cntx.drawImage(agoimg, 0, 0,300*m,300);}}}}function  pressss(){////获取canvas压缩后的图片数据var Pic = document.getElementById("myCanvas").toDataURL("image/png");var imgs =document.getElementById("press");imgs.src =Pic ;//上传// 去除多余，得到base64编码的图片字节流Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "");//可以用ajax提交到后台，提交后可以直接存数据库，也可以保存成图片，此处略。}<input type="file" id="fileId" name="fileId" value="上传图片"hidefocus="true" οnchange="getUrl(this.files,this.id);"/>
<canvas id="myCanvas"     style="display: none" ></canvas>
old img-><img src="" alt="" id="ago" style="width: 500px;"/>
<input type="button" value="ya suo->" οnclick="pressss()" />
new img-><img src="" alt="" id="press"/>
</body></html>

直接复制粘贴上面html代码或者通过下面链接下载

下载地址：demo下载

html5前端图片压缩，大小可配置相关推荐

移动前端—图片压缩上传实践
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...
前端图片压缩上传(纯js的质量压缩，非长宽压缩)
前端图片压缩上传(纯js的质量压缩,非长宽压缩) 此demo为大于1M对图片进行压缩上传若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> ...
JS前端图片压缩上传
JS前端图片压缩上传重点知识最近在做一个手机端的图片上传,写了一个比较符合自己要求的方法,可供参考在做这个功能模块时,我遇到了以下问题,都花费了大量时间: 1. 不知道怎么压缩图片,(代码和方法) ...
前端图片压缩上传（压缩篇）
为什么说这是一篇比较适合小白的前端图片压缩文章呢?因为我也是一个刚工作半年的前端小白,最近接到了一个前端图片压缩上传的任务,通过各种百度博客完成了这项任务,但是任务完成后对各种技术细节却还不是特别理解 ...
[html] 如何使用html5进行图片压缩上传？
[html] 如何使用html5进行图片压缩上传? 1.获取到图片的base64格式: 2.图片加载完成后,把图片转化为canvas: 3.使用canvas的toDataURL按照自己的需要进行压缩: ...
前端图片压缩解决办法
文章の目录问题产生背景解决办法 1.使用纯 js 解决 2.插件 js-image-compressor 写在最后问题产生背景在某一h5的项目,要求上传的图片格式为 base64 , 问题是用 ...
前端图片压缩 pngquanty
进行前端开发,必然会用到图片压缩,在尽可能小的改变图片视觉效果前提下,尽可能大的压缩图片大小,进行png 图片压缩常用 pngquant,在服务器上上传压缩过后的图片,以节省载宽Official w ...
winform 图片压缩大小为原图的一半_SCI论文图片编辑——常见十问十答
SCI论文图片的编辑是一门简单,却不容易的学问.在编辑图片的过程中,涉及到很多软件的配合使用,同时我们的目的不仅是满足投稿杂志的参数要求,还希望尽量做得美观好看.这要求我们必须反复地练习,并在学习中不 ...
winform 图片压缩大小为原图的一半_这款压缩工具让我找得好辛苦
今天得先给大家诉个苦. 大家可以看到,在黑哥这里文章中,GIF 动图和图片是比较多的. 这是为了给大家更清楚的展示软件的效果或者操作步骤,毕竟简单的文字陈述肯定没有来张图那么直观. 但是呢,微信公众号 ...
使用canvas进行图片压缩(前端图片压缩核心处理)
一.原理:实际上就是利用canvas进行重新绘制 1.先将图片的file文件转成baseURL 2.创建一个image标签去接收文件获取图片的宽高和比例. 3.创建canvas画布设置画布的大小. 4 ...

html5前端图片压缩，大小可配置

html5前端图片压缩，大小可配置相关推荐

最新文章

热门文章