如何把img元素里面的图片的base64编码获取

我觉得定义一个java类 *** 作文件，用js去调用它，最直接最简单。

如果不用file:// 访问的话，倒是还可以使用CORS解决跨域、canvas的getImageData、toDataURL之类的方法读取数据。

iOS----->前端

UIImageoriginImage=[UIImage imageNamed:@"originImagepng"];

NSDatadata=UIImageJPEGRepresentation(originImage,10f);

NSStringencodedImageStr=[data base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];

然后 再拼上前缀 data:image/png;base64,

这样就拼接出来了一个前端用来展示的 base64的字符串

前端------->iOS 

与上面的流程相反，先从前端获取前端生成的base64字符串

截去data:image/png;base64,前缀

NSDatadecodedImageData=[[NSData alloc]initWithBase64EncodedString:encodedImageStr options:NSDataBase64DecodingIgnoreUnknownCharacters];

UIImagedecodedImage=[UIImage imageWithData:decodedImageData];

这样就得到iOS想要的image对象。

基于vue框架

因安卓和ios在获取地址时的字段截取不一致，导致签名验证失效问题；所以在向后台传输地址时，分别对安卓和ios做了处理；

我这里签名是后台直接返回的，如需要自己算，参考：好吧，没找到，回头补上；

点击头像时，调用该方法；

此方法需在调用chooseImageFn()函数之后调用，否则无效；

微信后台自动返回的base64码；调用这里的localId和reslocalData都是刚刚我们上传的；

理想很饱满，现实很骨感，在转化的过程中，又出现了安卓和ios的不同返回值，导致的各种问题；

5中我们获取到的base64码；安卓返回不带格式，而ios返回的base64码是带有格式的，so,针对安卓和ios又处理了两个不同的版本；安卓版本的返回值，我们手动添加了它的格式；才顺利将base64码转成了file文件格式；如图：

7、将传给后台

Axios的post传输也是各种坑,新建formData;将所有需要的参数都用append的方式插入到新建的formData中；（必须这么传）

可能是默认事件阻挡。在 *** 作过程中，控制台获取到的base64之后，控制台可以打印出来base64，可是a标签的点击事件响应之后一直没有反应，可能是浏览器的默认事件阻挡了a标签的事件，排查到后，如果是，就换个浏览器 *** 作。

var video = documentgetElementById("videoElement"); //获取前台要截图的video对象

videosetAttribute('crossOrigin', 'anonymous') // 跨域处理

var canvas = windowcanvas = documentcreateElement("canvas");

canvaswidth = 500;

canvasheight = 300;

canvasgetContext('2d')drawImage(video, 0, 0,500,500);  // 将当前视频渲染在画布上，大小和视频分辨率一致

var images = canvastoDataURL("image/png"); //canvas的api中的toDataURL()保存图像[toDataUrl](>

image标签的直接绑定在src属性上

src="data:image/jpeg;base64," + 你获取到的base64的数据

<image class="code" src=" 'data:image/jpeg;base64,' + 你获取到的base64的数据" mode=""></image>

以上就是关于如何把img元素里面的图片的base64编码获取全部的内容，包括:如何把img元素里面的图片的base64编码获取、前端与iOS图片与base64转换、调用微信拍照或从手机相册中选图接口等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！