以下是一个示例代码,用于将图片转换为base64字符串:
// 将图片转为 base64 编码
function imageToBase64(imageUrl, callback) {
// 创建一个 Image 对象
const img = new Image();
// 确保图片已完全加载
img.onload = function () {
// 创建一个 Canvas 元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 设置 Canvas 的宽高等于图片的宽高
canvas.width = img.width;
canvas.height = img.height;
// 将图片绘制到 Canvas 上
ctx.drawImage(img, 0, 0);
// 获取图片的 base64 编码
const base64 = canvas.toDataURL('image/png');
// 执行回调函数,将 base64 字符串作为参数传递出去
callback(base64);
}
// 加载图片
img.src = imageUrl;
}
// 示例调用
const imageUrl = 'https://example.com/image.jpg';
imageToBase64(imageUrl, function (base64) {
console.log(base64);
});
这段代码中,通过创建一个Image
对象,加载图片并确保图片已完全加载后,创建一个Canvas
元素,将图片绘制到Canvas
上,并使用toDataURL
方法将Canvas
内容转换为base64编码。
你可以将这段代码使用在uni-app、Vue、小程序等前端开发框架中。