要实现这个功能，要使用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中media代码object的用法如下：因为浏览器对对象的支持依赖于对象类型，主流浏览器都是使用了不同的代码来加载相同的对象类型，因此object对象提供了解决方案：如果未显示object元素，就会执行位于<object>标签之中的代码，用这种方式就能嵌套多个object元素，使每个对应一个浏览器。首先需要检查是否有下一个声音文件hasprevitem，检查是否有上一个声音文件hideshowsta，设定开启或关闭连线统计的对话框isstatisticsvisible检查是否已开启连线统计的对话框 dogotourl 载入设定的的 realaudio 声音文件。
状态列文字改变时触发的事件 ongotourl，播放音效时，遇到url事件时，触发的事件，显示部的宽部，如果小于视频宽，则最小为视频宽，或者加大到指定值 ，并自动加大高度。
此改变只改变四周的黑框大小，不改变视频大小、param name="videobordercolor" value="0"，显示黑色框的颜色， 为rgb值，比如f00为黄色。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）