&!doctype html&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"&
&title&图片压缩&/title&
body { margin:0; padding:0; }
html { font-size:62.5%; }
.imgzip { padding:1 }
.imgzip .itm { padding-bottom:1 word-break:break- font-size:1.2 line-height:1.5 }
.imgzip .itm .tit { margin-bottom:.5 background-color:#e71446; color:#FFF; padding:.5rem 1 border-radius:3 }
.imgzip .itm .cnt { padding:1 }
.imgzip .itm .cnt img { display: max-width:100%; }
.imgzip textarea { width:100%; height:20 }
&input type="file" accept="image/*;capture=camera" class="input"&
&div class="imgzip"&&/div&
document.addEventListener('DOMContentLoaded', init, false);
function init() {
var u = new UploadPic();
input: document.querySelector('.input'),
callback: function (base64) {
var html = '';
html = '&div class="itm"&&div class="tit"&图片名称：&/div&&div class="cnt"&' + this.fileName + '&/div&&/div&'
+ '&div class="itm"&&div class="tit"&原始大小：&/div&&div class="cnt"&' + (this.fileSize / 1024).toFixed(2) + 'KB&\/div&&\/div&'
+ '&div class="itm"&&div class="tit"&编码大小：&/div&&div class="cnt"&' + (base64.length / 1024).toFixed(2) + 'KB&\/div&&\/div&'
+ '&div class="itm"&&div class="tit"&原始尺寸：&/div&&div class="cnt"&' + this.tw + 'px * ' + this.th + 'px&\/div&&\/div&'
+ '&div class="itm"&&div class="tit"&编码尺寸：&/div&&div class="cnt"&' + this.sw + 'px * ' + this.sh + 'px&\/div&&\/div&'
+ '&div class="itm"&&div class="tit"&图片预览：&/div&&div class="cnt"&&img src="' + base64 + '"&&\/div&&\/div&'
+ '&div class="itm"&&div class="tit"&Base64编码：&/div&&div class="cnt"&&textarea&' + base64 + '&\/textarea&&\/div&&\/div&';
document.querySelector('.imgzip').innerHTML =
loading: function () {
document.querySelector('.imgzip').innerHTML = '读取中，请稍候...';
function UploadPic() {
this.sw = 0;
this.sh = 0;
this.tw = 0;
this.th = 0;
this.scale = 0;
this.maxWidth = 0;
this.maxHeight = 0;
this.maxSize = 0;
this.fileSize = 0;
this.fileDate =
this.fileType = '';
this.fileName = '';
this.input =
this.canvas =
this.mime = {};
this.type = '';
this.callback = function () {};
this.loading = function () {};
UploadPic.prototype.init = function (options) {
this.maxWidth = options.maxWidth || 800;
this.maxHeight = options.maxHeight || 600;
this.maxSize = options.maxSize || 3 * 1024 * 1024;
this.input = options.
this.mime = {'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'bmp': 'image/bmp'};
this.callback = options.callback || function () {};
this.loading = options.loading || function () {};
this._addEvent();
* @description 绑定事件
* @param {Object} elm 元素
* @param {Function} fn 绑定函数
UploadPic.prototype._addEvent = function () {
var _this =
function tmpSelectFile(ev) {
_this._handelSelectFile(ev);
this.input.addEventListener('change', tmpSelectFile, false);
* @description 绑定事件
* @param {Object} elm 元素
* @param {Function} fn 绑定函数
UploadPic.prototype._handelSelectFile = function (ev) {
var file = ev.target.files[0];
this.type = file.type
// 如果没有文件类型，则通过后缀名判断（解决微信及360浏览器无法获取图片类型问题）
if (!this.type) {
this.type = this.mime[file.name.match(/\.([^\.]+)$/i)[1]];
if (!/image.(png|jpg|jpeg|bmp)/.test(this.type)) {
alert('选择的文件类型不是图片');
if (file.size & this.maxSize) {
alert('选择文件大于' + this.maxSize / 1024 / 1024 + 'M，请重新选择');
this.fileName = file.
this.fileSize = file.
this.fileType = this.
this.fileDate = file.lastModifiedD
this._readImage(file);
* @description 读取图片文件
* @param {Object} image 图片文件
UploadPic.prototype._readImage = function (file) {
var _this =
function tmpCreateImage(uri) {
_this._createImage(uri);
this.loading();
this._getURI(file, tmpCreateImage);
* @description 通过文件获得URI
* @param {Object} file 文件
* @param {Function} callback 回调函数，返回文件对应URI
* return {Bool} 返回false
UploadPic.prototype._getURI = function (file, callback) {
var reader = new FileReader();
var _this =
function tmpLoad() {
// 头不带图片格式，需填写格式
var re = /^data:base64,/;
var ret = this.result + '';
if (re.test(ret)) ret = ret.replace(re, 'data:' + _this.mime[_this.fileType] + ';base64,');
callback && callback(ret);
reader.onload = tmpL
reader.readAsDataURL(file);
* @description 创建图片
* @param {Object} image 图片文件
UploadPic.prototype._createImage = function (uri) {
var img = new Image();
var _this =
function tmpLoad() {
_this._drawImage(this);
img.onload = tmpL
* @description 创建Canvas将图片画至其中，并获得压缩后的文件
* @param {Object} img 图片文件
* @param {Number} width 图片最大宽度
* @param {Number} height 图片最大高度
* @param {Function} callback 回调函数，参数为图片base64编码
* return {Object} 返回压缩后的图片
UploadPic.prototype._drawImage = function (img, callback) {
this.sw = img.
this.sh = img.
this.tw = img.
this.th = img.
this.scale = (this.tw / this.th).toFixed(2);
if (this.sw & this.maxWidth) {
this.sw = this.maxW
this.sh = Math.round(this.sw / this.scale);
if (this.sh & this.maxHeight) {
this.sh = this.maxH
this.sw = Math.round(this.sh * this.scale);
this.canvas = document.createElement('canvas');
var ctx = this.canvas.getContext('2d');
this.canvas.width = this.
this.canvas.height = this.
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, this.sw, this.sh);
this.callback(this.canvas.toDataURL(this.type));
ctx.clearRect(0, 0, this.tw, this.th);
this.canvas.width = 0;
this.canvas.height = 0;
this.canvas =
阅读(...) 评论() && 本主题由
于 15-12-29 13:53 分类 &
注册 12-3-24行业 工业制造
哪款软件可以查违章照片啊
哪款软件可以查违章照片啊
15-12-29 13:00
注册 15-4-26
15-12-29 13:04
注册 15-3-15
15-12-29 18:47
注册 12-12-14行业 政府行政
智慧镇江用不了
15-12-29 19:15
注册 15-6-13
驾驶无忧可以，不过得等几天就可以看到。
15-12-29 19:20
注册 15-10-18
百度可以呀
15-12-29 19:21
& 哪款软件可以查违章照片啊&nbsp&nbsp
Powered by
0.019588 s
梦溪论坛的帖子由网友发布并不代表网站官方之意见及观点。如需转载本论坛文字及图片请注明出自梦溪论坛，商业用途需征得作者本人同意！
发帖、回帖拥有个人空间
上传及分享相册精彩内容推荐1322人阅读
上传图片的问题，点击浏览选择图片后就可以在image框显示图片，不要再点击上传，即所见即所得的效果.在asp.net & 在html里面写的.
&td & & &input & id= "upimage " & type= "file " & onchange= "document.getElementById( 'previewImage ').innerHTML & = & '预览 &br& & &img & src=/ ' '+this.value+ '/ ' & width=100 & align=absmiddle& '; " & name= "upimage " & runat= "server "& &/td& &td& &div & align= "center "& &span & id= "previewImage "& 没有图片 &/span& &/NOBR& & &/div& &/td&
让img标签的src属性为file标签的value的值，在file的onchange事件中对img标签的属性赋值就可以了。
&img & name= "img1 "& &input & type= "file " & onchange= "document.all.img1.src=this.value "&
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4905次
排名：千里之外七年级下册历史期末测试题(200道选择题_有图片)_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
七年级下册历史期末测试题(200道选择题_有图片)
上传于||暂无简介
阅读已结束，如果下载本文需要使用
想免费下载本文？
下载文档到电脑，查找使用更方便
还剩10页未读，继续阅读
你可能喜欢