<body>
<input id="fileipt" type="file" accept="image/*"/>
<div class="img-list"></div>
<script type="text/javascript">
var getBase64 = function(file){
var maxWidth = 640;
var promise = new Promise(function(resolve, reject){
if(file.files && file.files[0]){
var thisFile = file.files[0];
if(thisFile.size>819200){
mualert.Bomb("图片不能超过800K");
return
};
var reader = new FileReader();
reader.onload = function(event){
var imgUrl = event.target.result;
var img = new Image();
img.onload = function(){
var canvasId = 'canvasBase64Imgid',
canvas = document.getElementById(canvasId);
if(canvas!=null){document.body.removeChild(canvas);}
var canvas = document.createElement("canvas");
canvas.innerHTML = 'New Canvas';
canvas.setAttribute("id", canvasId);
canvas.style.display='none';
document.body.appendChild(canvas);
canvas.width = this.width;
canvas.height = this.height;
var imageWidth = this.width,
imageHeight = this.height;
if (this.width > maxWidth){
imageWidth = maxWidth;
imageHeight = this.height * maxWidth/this.width;
canvas.width = imageWidth;
canvas.height = imageHeight;
}
var context = canvas.getContext('2d');
context.clearRect(0, 0, imageWidth, imageHeight);
context.drawImage(this, 0, 0, imageWidth, imageHeight);
var base64 = canvas.toDataURL('image/png',1);
var imgbase = base64.substr(22);
resolve(imgbase); //把字符串返回去
}
img.src = imgUrl;
}
reader.readAsDataURL(file.files[0]);
}
});
return promise;
}
var imglist = [],listhtml='',list = document.querySelector('.img-list');
document.getElementById('fileipt').addEventListener('change', function(){
getBase64(this).then(function(data){
imglist.push(data);
console.log('data:image/png;base64,'+data)
listhtml += '<img src="data:image/png;base64,'+data+'"/>';
list.innerHTML = listhtml;
});
},false);
</script>
</body>
<input id="fileipt" type="file" accept="image/*"/>
<div class="img-list"></div>
<script type="text/javascript">
var getBase64 = function(file){
var maxWidth = 640;
var promise = new Promise(function(resolve, reject){
if(file.files && file.files[0]){
var thisFile = file.files[0];
if(thisFile.size>819200){
mualert.Bomb("图片不能超过800K");
return
};
var reader = new FileReader();
reader.onload = function(event){
var imgUrl = event.target.result;
var img = new Image();
img.onload = function(){
var canvasId = 'canvasBase64Imgid',
canvas = document.getElementById(canvasId);
if(canvas!=null){document.body.removeChild(canvas);}
var canvas = document.createElement("canvas");
canvas.innerHTML = 'New Canvas';
canvas.setAttribute("id", canvasId);
canvas.style.display='none';
document.body.appendChild(canvas);
canvas.width = this.width;
canvas.height = this.height;
var imageWidth = this.width,
imageHeight = this.height;
if (this.width > maxWidth){
imageWidth = maxWidth;
imageHeight = this.height * maxWidth/this.width;
canvas.width = imageWidth;
canvas.height = imageHeight;
}
var context = canvas.getContext('2d');
context.clearRect(0, 0, imageWidth, imageHeight);
context.drawImage(this, 0, 0, imageWidth, imageHeight);
var base64 = canvas.toDataURL('image/png',1);
var imgbase = base64.substr(22);
resolve(imgbase); //把字符串返回去
}
img.src = imgUrl;
}
reader.readAsDataURL(file.files[0]);
}
});
return promise;
}
var imglist = [],listhtml='',list = document.querySelector('.img-list');
document.getElementById('fileipt').addEventListener('change', function(){
getBase64(this).then(function(data){
imglist.push(data);
console.log('data:image/png;base64,'+data)
listhtml += '<img src="data:image/png;base64,'+data+'"/>';
list.innerHTML = listhtml;
});
},false);
</script>
</body>
3683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
