将本地图片上传获得base64
$('.courseimgupload input').change(function(e) {
console.info(e.target.files[0]);//图片文件
var dom =$("input[id^='imgTest']")[0];
console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
var reader = new FileReader();
reader.onload = (function (file) {
return function (e) {
console.info(this.result); //这个就是base64的数据了
};
})(e.target.files[0]);
reader.readAsDataURL(e.target.files[0]);
});
把页面中的图片变成base64的数据
<!--这里先放上一张图片-->
<img>
<input type="button" onclick="imgChaneBase64()" value="img标签绘制到canvas" /><br />
<!--引入html2canvas-->
<script type="text/javascript" src="/lib/html2canvas/html2canvas.js"></script>
<script type="text/javascript">
function imgChaneBase64() {
//将要变成base64的图片的html标签当参数传进来,这里如果将document传进来,就会将整个页面变成图片,在then中会返回一个canvas
html2canvas(document.getElementById("img")).then(function(canvas) {
console.info(canvas);
var imgData = canvas.toDataURL("image/png"); //这里会将canvas转化为base64的数据
document.body.appendChild(canvas); //页面鼠标右击这个标签时会提示保存图片,保存之后会以png格式保存
});
}
</script>
注:这里利用的是截屏的原理,将html内容变成base64的,所有其实不是真的将这个图片变成base64
获取本地图片width 和height
$('#imgf').change(function(e) {
console.info(e.target.files[0]);//图片文件
var dom =$("input[id^='imgf']")[0];
console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
var reader = new FileReader();
reader.onload = (function (file) {
return function (e) {
// console.info(this.result); //这个就是base64的数据了
var img = new Image();
img.src=this.result;
img.onload = function (argument) {
console.log(this.width +'----------'+this.height) //这里就是上传图片的宽和高了
}
};
})(e.target.files[0]);
reader.readAsDataURL(e.target.files[0]);
});
网友评论