將本地圖片上傳獲得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]);
});
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
