mirror of
https://github.com/wu736139669/vczero.github.io.git
synced 2026-08-05 06:23:38 +00:00
add upload
This commit is contained in:
lh_wang
+162
@@ -0,0 +1,162 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||
<meta content="telephone=no" name="format-detection" />
|
||||
<title>HTML5图片上传预览</title>
|
||||
<style>
|
||||
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, big, cite, code, del, em, font, img, ins, small, strong, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
margin: 0 auto;
|
||||
}
|
||||
body {
|
||||
font-family: Arial,"宋体",Lucida,Verdana,Helvetica,sans-serif;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
line-height: 150%;
|
||||
}
|
||||
.w {
|
||||
width: 800px;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
zoom: 1;
|
||||
margin: 10px;
|
||||
}
|
||||
.mc {
|
||||
padding: 30px 0 20px;
|
||||
|
||||
border-width: 0px 1px 1px;
|
||||
}
|
||||
.form {
|
||||
width: 750px;
|
||||
}
|
||||
.item {
|
||||
padding-top: 9px;
|
||||
z-index: 1;
|
||||
}
|
||||
.label{
|
||||
width: 190px;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.item-ifo{
|
||||
position: relative;
|
||||
width: 370px;
|
||||
}
|
||||
.text{
|
||||
width: 238px;
|
||||
height: 16px;
|
||||
padding: 10px 25px 10px 5px;
|
||||
border: 1px solid #cccccc;
|
||||
float: none;
|
||||
font-size: 14px;
|
||||
font-family: arial,"宋体";
|
||||
color: #999;
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn{
|
||||
|
||||
border: 1px solid #dddddd;
|
||||
padding: 0;
|
||||
width: 77px;
|
||||
height: 28px;
|
||||
background: #f4f4f4;
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.btn span {
|
||||
color: #333;
|
||||
}
|
||||
a:link, a:visited {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:link, a:visited {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="w">
|
||||
<div class="mc">
|
||||
<div class="form">
|
||||
<div class="item">
|
||||
<span class="label">最大宽度(px)</span>
|
||||
<div class="item-ifo">
|
||||
<input type="text" id="maxwidth" value=""/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">最大高度(px)</span>
|
||||
<div class="item-ifo">
|
||||
<input type="text" id="maxheight" value=""/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">压缩质量(%)</span>
|
||||
<div class="item-ifo">
|
||||
<input type="text" id="quality" value=100 />
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label"></span>
|
||||
<div class="item-ifo">
|
||||
<a class="btn">
|
||||
<span id="drawImage">裁剪</span>
|
||||
</a>
|
||||
<a class="btn">
|
||||
<span id="uploadImageInfo">上传</span>
|
||||
</a>
|
||||
<a class="btn">
|
||||
<span id="saveImageInfo">下载</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">日志</span>
|
||||
<div class="item-ifo">
|
||||
<textarea id="msg" rows="10" cols="50" style="font-size:14px;color:red;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<span class="label">选择图片</span>
|
||||
<div class="item-ifo">
|
||||
<input id="upload" type="file" single accept="image/gif,image/png,image/jpeg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="container" style="">
|
||||
<canvas id="myCanvas"></canvas>
|
||||
</div>
|
||||
<script src="http://cdn.staticfile.org/require-jquery/0.25.0/require-jquery.js"></script>
|
||||
<script src="3.js"></script>
|
||||
<script type="text/javascript">
|
||||
var u = new Upload('#upload', '#myCanvas');
|
||||
u.showImg();
|
||||
|
||||
$('#drawImage').on('click', function(){
|
||||
u.drawImage({
|
||||
width:300,
|
||||
height:300
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+109
@@ -0,0 +1,109 @@
|
||||
|
||||
var Upload = function(input, canvas, canvasWidth, canvasHeight){
|
||||
this.input = $(input);
|
||||
this.canvas = $(canvas)[0];
|
||||
this.context = this.canvas.getContext("2d");
|
||||
this.offscreenCanvas = document.createElement('canvas');
|
||||
this.offscreenContext = this.offscreenCanvas.getContext('2d');
|
||||
this.reader = new FileReader();
|
||||
this.image = new Image();
|
||||
|
||||
var that = this;
|
||||
this.reader.onload = function(e){
|
||||
that.image.onload = function(){
|
||||
if(typeof canvasWidth === 'undefined'){
|
||||
canvasWidth = 200;
|
||||
}
|
||||
if(typeof canvasHeight === 'undefined'){
|
||||
canvasHeight = 200;
|
||||
}
|
||||
var size = Upload.getRealWH(that.image.width, that.image.height, canvasWidth, canvasHeight);
|
||||
var showWidth = size.width;
|
||||
var showHeight = size.height;
|
||||
|
||||
that.context.clearRect(0, 0, that.canvas.width, that.canvas.height);
|
||||
that.canvas.width = showWidth;
|
||||
that.canvas.height = showHeight;
|
||||
that.context.drawImage(that.image, 0, 0, showWidth, showHeight);
|
||||
that.offscreenContext.clearRect(0, 0, that.offscreenCanvas.width, that.offscreenCanvas.height);
|
||||
that.offscreenCanvas.width = showWidth;
|
||||
that.offscreenCanvas.height = showHeight;
|
||||
that.offscreenContext.drawImage(that.image, 0, 0, showWidth, showHeight);
|
||||
};
|
||||
that.image.setAttribute('src', e.target.result);
|
||||
};
|
||||
};
|
||||
|
||||
//根据宽高比例进行缩放
|
||||
Upload.getRealWH = function(width, height, maxWidth, maxHeight){
|
||||
var showWidth = width;
|
||||
var showHeight = height;
|
||||
//宽与高的比例
|
||||
var rate = width / height;
|
||||
//如果宽更大，则按照宽缩放
|
||||
if(rate > 1){
|
||||
//如果图片宽高小于容器宽度，则放大
|
||||
if(width < maxWidth){
|
||||
showWidth = width;
|
||||
showHeight = height;
|
||||
}else{
|
||||
//如果图片宽高大于容器宽度，则缩小
|
||||
showWidth = maxWidth;
|
||||
showHeight = showWidth / rate;
|
||||
}
|
||||
}else{
|
||||
//如果高更大，则按照高缩放
|
||||
//如果图片高度小于容器高度，则放大
|
||||
if(height < maxHeight){
|
||||
showWidth = height;
|
||||
showHeight = width;
|
||||
}else{
|
||||
//如果图片高度大于容器宽度，则缩小
|
||||
showHeight = maxHeight;
|
||||
showWidth = showHeight * rate;
|
||||
}
|
||||
}
|
||||
return {
|
||||
width: showWidth,
|
||||
height: showHeight
|
||||
}
|
||||
};
|
||||
|
||||
Upload.prototype.showImg = function(){
|
||||
var that = this;
|
||||
that.input.on('change', function(){
|
||||
var input = this;
|
||||
if (input.files && input.files[0]) {
|
||||
var file = input.files[0];
|
||||
if(file.type && !/image/i.test(file.type)){
|
||||
return false;
|
||||
}
|
||||
that.reader.readAsDataURL(file);
|
||||
return file;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
Upload.prototype.drawImage = function(opts){
|
||||
var width = opts.width || 0;
|
||||
var height = opts.height || 0;
|
||||
var quality = opts.quality || 1;
|
||||
var size = Upload.getRealWH(this.image.width, this.image.height, width, height);
|
||||
var showWidth = size.width;
|
||||
var showHeight = size.height;
|
||||
|
||||
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
this.canvas.width = showWidth;
|
||||
this.canvas.height = showHeight;
|
||||
this.context.drawImage(this.image, 0, 0, showWidth, showHeight);
|
||||
var src = this.canvas.toDataURL('image/jpg', quality);
|
||||
|
||||
return src;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
+1803
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user