要实现这个功能，要使用canvas来做，Canvas里面提供了一个toDataURL的接口，可以用这个接口获得图片的base64
所以思路是：
获得canvas对象
加载图片到canvas对象里面
从canvas对象中获取base64数据
<!DOCTYPE html><html>
<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/pngbase64,", "")
}
function main() {
var img = document.createElement('img')
img.src = './images/yeoman.png'
img.onload =function() {
var data = getBase64Image(img)
console.log(data)
}
document.body.appendChild(img)
}
main()
</script>
</body>
</html>
然后可以在控制台看到base64的数据
希望可以帮到你
html 直接使用svg图片不能显示是设置错误造成的，解决方法为：
1、点击电脑开始菜单，找到Inscape工具并点击打开。
2、在Inscape工具编辑界面，绘制两个圆形，设置不同半径和不同颜色填充。
3、设置完毕后，将其导出成SVG格式，存储到桌面上。
4、通过快捷方式打开HBuilderX工具，并新建Web项目，将svg图片复制到项目指定目录下，然后新建一个静态页面。
5、在body标签内，添加一个embed标签，将SVG图片引入到页面里。
6、保存代码并直接使用浏览器预览，可以查看到SVG图片效果。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div {width: 72pxheight: 72pxbackground: url(small3.png) no-repeatoverflow: hidden}
3、浏览器运行index.html页面，此时成功将矩形图片只显示了正方形部分。
4、点击小图后，成功显示了大图。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）