以下是一个示例代码,用于将图片转换为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、小程序等前端开发框架中。