前言：
一，点击图片获取base64
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="4.png" alt="" />
<script src="jquery.min.js"></script>
<script>
$(function() {
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/png");
return dataURL
// return dataURL.replace("data:image/png;base64,", "");
}
$("img").click(function() {
var sr = $(this).attr("src");
var img = new Image();
img.src = sr;
var base = getBase64Image(img);
console.log(base);
});
})
</script>
</body>
</html>
二，上传图片后需要获取并传后台的base64
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="" alt="" />
<input type="file" />
<script src="jquery.min.js"></script>
<script>
$(function() {
$("input").change(function() {
var _obj = $(this);
files(_obj);
});
function files(_obj) {
var file = $(_obj).get(0).files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
console.log(e.target.result);
$("img").attr("src", e.target.result);
}
}
})
</script>
</body>
</html>总结：一般情况上传图片的大小都应该有限制，目前这是没有限制的
2319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
