如何把后端传给前端的图片的url转为base64

通常我们会使用canvas提供的toDataURL方法。

        /**@url :图片服务器上的url
		 * @img :图片url对应的图片
		 * */
			const toBase64 = (img)=>{
			    const canvas = document.createElement('canvas');//创建一个canvas元素
			    canvas.width = img.width;//把当前url对应的图片的宽度赋予canvas
			    canvas.height = img.height;//把当前url对应的图片的高度赋予canvas
			    const ctx = canvas.getContext('2d');
			    ctx.drawImage(img,0,0,canvas.width,canvas.height);//在画布上一比一的画出img
			    const base64 = canvas.toDataURL('image/jpeg');//调用canvas的toDataURL获取.jpg的base64数据
			    return base64;
			}
			const getImageUrlBase64 = (url)=>{
				const img = new Image();
				img.crossOrigin = 'anonymous';//处理跨域,后端也要设置跨域处理才行
				img.src = url;
				img.onload=()=>{
					return toBase64(img);
				}
			}

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐