js：图片url转base64编码

js：图片url转base64编码

思路：

将图片url转为Image对象将Image对象绘制到Canvas上将Canvas对象转为Base64

实现代码

// Image对象转base64function imageToBase64(image) { let canvas = document.createElement('canvas') let width = image.width let height = image.height canvas.width = width canvas.height = height let context = canvas.getContext('2d') context.drawImage(image, 0, 0, width, height) return canvas.toDataURL('image/png')}// 回调方式function urlToBase64(url, callback = null) { let image = new Image() image.setAttribute('crossOrigin', 'Anonymous') image.src = url + '?v=' + Math.random() image.onload = function () { let dataURL = imageToBase64(image) if (callback) { callback(dataURL) } }}// Promise方式function urlToBase64Async(url) { return new Promise((resolve,) => { urlToBase64(url, (data) => { resolve(data) }) })}(async () => { let image_url =' const dataURL = await urlToBase64Async(image_url) console.log(dataURL) // data:image/png;base64,iVBORw0KGgoAAAANSU})()

需要注意的是：

浏览器中有跨域问题的存在，所以浏览器端处理的图片地址，需要确保允许跨域

参考​​​vue、JS图片url转base64​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。