<script type="text/javascript">
// 注意图片的路由必须是在服务器上的图片
var imgurl = "http://localhost:8888/img/1.jpg"
var base64 = ''
// 新建一个image对象
var image = new Image();
image.src = imgurl;
// 设置跨域问题
image.crossOrigin = 'anonymous';
// 确保图片加载成功后在进行编码操作
image.onload = function(){
base64 = base64 + getBaseImage(image);
// 把base64的值给img里面的url
}
// 等页面在加载完毕后,给img的标签的src进行赋值操作
window.onload = function(){
var img = document.getElementsByTagName('img');
img[0].src=base64
}
function getBaseImage(img){
// 创建画布 这里的canvas的值是死的
var canavs = document.createElement('canvas');
// 设置画版的宽和高
canavs.width = img.width;
canavs.height = img.height;
// 使用2D环境来绘制平面图片
var ctx = canavs.getContext("2d");
// 绘制图片
ctx.drawImage(img,0,0,img.width,img.height); // 参数:图片对象,x轴的起止,y轴的起止,y轴的结束,x轴的结束
// 获取拓展名
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
// 将图片变成base64的图片
// 注意,确保图片加载成功后才可以进行转换
var dataurl = canavs.toDataURL('images' + ext)
return dataurl
}
</script>
在前端使用base64的方法展示图片
最新推荐文章于 2024-07-11 18:06:19 发布