图片转换Base64

base64图片在线工具http://imgbase64.duoshitong.com/

1.支持 PNG、GIF、JPG、BMP、ICO 格式。

2.将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地方。

3.假定生成的代码为"data:image/jpeg;base64, .....",那么你只需要全部复制,然后在插入图片的时候,地址填写这段代码即可。

4.CSS中使用:background-image: url("https://img-blog.csdnimg.cn/2022010611382936351.png");

5.HTML中使用:<img src="https://img-blog.csdnimg.cn/2022010611382936351.png" />

6.图片转换Base64,无线开发、HTML5、CSS3必备的工具,CSS DataURI Base64 工具。

7.将图片转换成base64编码的,在web网上一般用于小图片上,不仅可以减少图片的请求数量(集合到js、css代码中),还可以防止因为一些相对路径等问题导致图片404错误。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在Vue3中,可以使用以下方法将图片转换base64格式: 1. 使用Vue指令: 在Vue3中,可以使用自定义指令来实现图片转换base64格式的功能。首先,在Vue实例中注册一个全局的自定义指令,然后在需要转换图片元素上使用该指令即可。 ```vue // 在main.js或其他入口文件中注册指令 app.directive('toBase64', { mounted(el) { const image = new Image(); image.setAttribute("crossOrigin", "anonymous"); image.src = el.src; image.onload = function() { const canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; const ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0, image.width, image.height); const base64 = canvas.toDataURL("image/png"); // 根据需要设置图片格式 el.src = base64; }; } }); ``` ```vue <!-- 在需要转换图片元素上使用指令 --> <template> <img src="图片路径" v-to-base64> </template> ``` 2. 使用方法: 另一种方法是在Vue实例中定义一个方法来实现图片转换base64格式的功能。首先,创建一个全局的方法,然后在需要转换图片加载完成后调用该方法即可。 ```vue // 在Vue实例中定义全局方法 methods: { getBase64Image(url) { const image = new Image(); image.setAttribute("crossOrigin", "anonymous"); image.src = url; image.onload = () => { const canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; const ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0, image.width, image.height); const base64 = canvas.toDataURL("image/png"); // 根据需要设置图片格式 console.log(base64); // 输出base64字符串,可以根据需求进行后续操作 }; } }, mounted() { this.getBase64Image("图片路径"); } ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值