要实现这个功能,要使用canvas来做,Canvas里面提供了一个toDataURL的接口,可以用这个接口获得图片的base64
所以思路是:
- 获得canvas对象
- 加载图片到canvas对象里面
- 从canvas对象中获取base64数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <script type = "text/javascript"> 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,", ""); } function main() { var img = document.createElement('img'); img.onload =function() { var data = getBase64Image(img); console.log(data); } img.src = '111/1.jpg'; document.body.appendChild(img); } main(); </script> </body> </html>