关于图片转成base64的信息

本文目录一览：

• 1、前端与iOS图片与base64转换

• 2、react native 把图片转成base64

• 3、解决将网络图片转成base64格式报跨域的问题

前端与iOS图片与base64转换

iOS-----前端

UIImage*originImage=[UIImage imageNamed:@"originImage.png"];

NSData*data=UIImageJPEGRepresentation(originImage,1.0f);

NSString*encodedImageStr=[data base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];

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

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

前端-------iOS 

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

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

NSData*decodedImageData=[[NSData alloc]initWithBase64EncodedString:encodedImageStr options:NSDataBase64DecodingIgnoreUnknownCharacters];

UIImage*decodedImage=[UIImage imageWithData:decodedImageData];

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

react native 把图片转成base64

这里用到的是 react-native-fs这个组件 把本地图片转成base64

关于组件的使用 请参考

下面就说下如何利用这个组件转成base64:

如果网页上查看 请书写正确的格式这个是 jpeg的图片格式如下：

data:image/jpeg;base64,

解决将网络图片转成base64格式报跨域的问题

此前开发了一个前端生成海报的功能。但是由于海报的图片是网络路径的图片。所以在生成海报前需要把网络图片转成base64格式。

但是在转的途中。。发现，报跨域了。。。然后百度了一大堆看似靠谱的方法。

本来以为行了。然后打开控制台一看。canvas在转base64的时候跨域了。

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

百度了一下说给图片添加一个crossOrigin='Anonymous'就可以解决跨域。

但是加上后发现依旧是跨域。这下就头疼了。

后面偶然一次瞎操作，把crossOrigin='Anonymous'给提到了赋值src的前面。

也就是

结果竟然成功了。。。。。

附：如果服务端没有给图片设置请求头里的Access-C...A...O...字段的值为*或者你当前的域名。就算前端搞了这个跨域的玩意儿上去，依旧是拿不到图片的。

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