图片生成beta64

来源：互联网发布：手机美工软件有哪些编辑：程序博客网时间：2024/06/07 05:03

<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>

阅读全文

0 0