图片地址url转换为base64格式

最新推荐文章于 2025-10-10 14:43:57 发布

原创最新推荐文章于 2025-10-10 14:43:57 发布 · 909 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html5

本文介绍了一种将图片转换为Base64编码的方法，通过创建HTML5的canvas元素并利用其toDataURL方法，实现图片文件到Base64字符串的转换，适用于网页应用中图片的即时处理与展示。

getBase64Image(img){
debugger;
var canvas = document.createElement(“canvas”);
$(“canavs”).hide();
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext(“2d”);
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL(“image/”+ext);
return dataURL;
}
var URL = “xxxx”;//需要转换的图片url
var tempImage = new Image();
tempImage.src = URL ;
tempImage.crossOrigin = “Anonymous”;//防止跨域出现报错
tempImage.onload = function(){
var base64 = this.getBase64Image(tempImage);
console.log(base64);
}