js图片压缩大小插件

2024-11-04

jquery压缩图片插件

imageCompress 只有图片压缩功能,比较简单jquery.imageCompress.js 使用说明: el:为上传框 quality:压缩图片质量,单位为% onloadStart:读取图片开始,传入文件对象 onloadEnd:读取图片结束,传入图片对象 oncompressStart:压缩图片开始,传入压缩前图片对象 oncompressEnd:压缩图片结束,传入压缩后图片对象 callback:所有图片压缩处理完成以后的回调 $('#image').imageCompress(

使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器

使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进行的源码: /** * js使用form上传图片,支持本地预览选中的图片,支持携带自定义参数 * @param {string} params.previewImgId 预览图片控件id,可以预览上传图片 * @param {string} params.url 提交上传的url * @param

viewer.js图片查看器插件（可缩放/旋转/切换）

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- <meta name="viewport" content="width=devic

js图片预览插件，不涉及上传

小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

[转]png图片压缩大小但是不改变透明部分

降低PNG图片存储大小方法,图片压缩方法,如何降低PNG图片存储大小?前提是分辨率和尺寸大小不变,图形的透明部分不变.请看如下办法,亲测可用. 1. 将PNG图片用PS打开. 2. 图像-模式-8位/通道 (这样在后续存储时才有gif存储选项) 3. 将图片另存为GIF. 4. 选项中选择局部可感知或者全部可感知. 5. 强制选择“无”,勾选透明度. 6. 存储后的gif文件和原png文件对比,从20.6k变为了1.8k. 7. 最后,把文件后缀的gif命名为png. 这样,既保证了分辨率.大小

Angular里使用(image-compressor.js)图片压缩

参考资料: http://www.imooc.com/article/40038 https://github.com/xkeshi/image-compressor 示例代码: <nz-upload class="avatar-uploader" [nzAccept]="'image/*'" nzFileType="image/png,image/jpeg,image/gif,image/jpg" [nzAction]="upl

js图片压缩和上传并显示

由于近期项目中需要做个图片压缩上传,所以就在网上找了些资料自己写了一个 html部分 <input id="file" type="file"> <img id="imga" src="" alt=""> js部分 var eleFile = document.querySelector('#file'); // 压缩图片需要的一些元素和对象 var reader = new Fil

js 图片压缩上传（base64位）以及上传类型分类

一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input type="file" multiple accept='image/*'> 3.指明调用摄像头获取图片 <input type="file" capture='camera' accept='image/*'> 4.调用摄像头并获取多张图片(摄像头

js图片压缩+ajax上传

图片压缩用到了localresizeimg 地址: https://github.com/think2011/localResizeIMG 用起来比较简单 <input type="file" id="image1" class="hidden" accept="image/png,image/gif,image/jpeg" / //图片压缩 $("input:file").change(functi

JS—图片压缩上传（单张）

*vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="image/*" @change="selectImgs" ref="file" /> 一.图片压缩 /* file:文件(类型是图片格式), obj:文件压缩后对象width, height, quality(0-1) callback:容器或者回调函数 *

无组件客户端js图片压缩

<div class="free-upload"> <p>上传您的约会照片,一张合影.一张票据哦!</p> <div class="free-upload-photo"> <span id="photo_img"></span> <input type="file" id="photo" /> </div> &l

js 图片压缩上传(纯js的质量压缩，非长宽压缩)

下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <script type="text/javascript

js图片压缩

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> img{ max-width: 400px; } .select{ } </style> </head> <body> <div class="he

ScrollPic.js——图片左右滚动插件

自己在做项目的时候刚好遇到了图片做左右滚动的项目,发现ScrollPic.js这个插件还是很好用的,一般的浏览器都支持,也可以做成bootstrap样式: 首先需要下载ScrollPic.js这个插件: 使用方法: <SCRIPT language=javascript type=text/javascript> <![CDATA[//><!-- window.onload=function(){ //首先需要加载ScrollPic.js插件 v

js图片压缩上传

最近公司的移动产品相约app要做一次活动,涉及到图片上传,图片又不能太大,不然用户体验太差,必须先压缩再上传,所以用到了html5的canvas和FileReader,代码先上,小弟前端经验不足,代码写得有点乱,有什么不足之处,望大神指点! <div class="free-upload"> <p>上传您的约会照片,一张合影.一张票据哦!</p> <div class="free-upload-photo"> <

Vue.js图片预览插件

vue-picture-preview-extend vue-picture-preview的扩展版本,本文中插件是由其他大神开发,我做了一些扩展,原文链接:https://segmentfault.com/u/x_logic. 预览(原文章的预览,非扩展后的) 安装 npm install --save vue-picture-preview-extend 使用首先在项目的入口文件中引入, 调用 Vue.use 安装. import vuePicturePreview from 'vue-p

Viewer.js 图片预览插件使用

一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式(可做屏保) 支持缩略图支持标题显示支持多种自定义事件 Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用. 二.下载纯JS版本:https://github.com/fengyuanchen/viewer

适用于移动端、PC 端 Vue.js 图片预览插件

1.安装:npm install --save vue-picture-preview 2.使用: (1)入口文件中main.js中全局引入: import Vue from 'vue' import vuePicturePreview from 'vue-picture-preview'; Vue.component('Previewer', vuePicturePreview); (2)按需局部引入: import vuePicturePreview from 'vue-picture-pr

使用FormData数据做图片上传： new FormData() canvas实现图片压缩

使用FormData数据做图片上传: new FormData() canvas实现图片压缩 ps: 千万要使用append不要用set 苹果ios有兼容问题导致数据获取不到,需要后台接口支持formData数据 Content-Type: multipart/form-data 正确的打开方式:formdata.append('file', file) 错误的打开方式:formData.set(name,value) //html代码 <div class="sendIm

纯原生js移动端图片压缩上传插件

前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于jquery.zepto的(这句话似乎吐槽次数太多了...),然后我也就不吐槽了, 然后当然是自己做了,先上图: 纯原生js的移动端图片压缩上传插件,不依赖任何库用法在html页面中引入input标签,通过自定义属性data-LUploader绑定点击触发的标签id,写法如下: <div cla

js压缩图片上传插件localResizeIMG

示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0],{width: 1024,quality :1,fieldName:'file'}).then(function(data) { return upload(_this.get(0) , data.formData); }).then(function(data) { // data => 上传成功

js图片压缩大小插件

热门专题