‘壹’ js 将图片转换为base64编码
将图片转换为举扰Base64
获取图片Base64编码激答镇
方式一：Blob和FileReader 对象
实现原理：
使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = "blob"]
使用FileReader 对象接明粗收blob
方式二：canvas.toDataURL()方法
实现原理：
使用canvas.toDataURL()方法
需要解决图片跨域问题 image.crossOrigin = '';
使用了Jquery库的$.Deferred()方法
‘贰’ 使用Node中的Buffer模块，将图片转换成base64编码
Buffer官方文档如侍塌下 http://nodejs.cn/api/buffer.html
node开发过程中，常用的就是将图片转换成base64编码，这时候就用到buffer了：
运行
将打印出来的结果输入到test.js这个文件里，便于查看。之后我物辩们在test.js里就老蚂圆能看到这个图片的base64编码了。
再设置好其 DataURI前缀 就能在浏览器里查看这张图片啦！
下面是我在浏览器查看的结果：
‘叁’ 小程序 使用upng.js 把小程序选择的图片转换为base64
有时候会遇到后端需要前端获取的图片文件转换成base64，在传给后台
小程序有专门的选肢液择图片接口，
wx.chooseImage(OBJECT)
但是这个只是返回一个图片的临时路径，并不是文件数据本身。
小程序暂时没有接口直接转base64的
所以我们需要使用canvas和canvasGetImageData（小程序版本1.9.0以后要才有）先获取图片内容，
再通过插件upng.js插件实现图片转base64（所需插件文件附件中）
1. 把upng.js和巧举pako.min.js文件放到项目中
2. 在pages下的页面js文件中导入
var upng = require('../../utils/upng.js');
这里只需要导入npng.js ，pako.min.js是在npng,js里面调用
3. 建一个canvas
chooseImage">人脸测试
// 画布
// 生成base64位图片展示 变量imgbase64
need-to-insert-img
4. 添加js点击chooseImage事件
chooseImage: function() {
var that = this;
var coss_signature = wx.getStorageSync('cos_signature');
var canvasID = "imgCanvas";
var canvas = wx.createCanvasContext(canvasID)
wx.chooseImage({
sourceType: ['album', 'camera'],
sizeType: ['original'],
count: 1,
success: function (res) {
var tempFilePaths = res.tempFilePaths;
// 获取文件路径
var filePath = tempFilePaths[0];
// 1. 绘制图片至canvas
canvas.drawImage(filePath, 0, 0, 300, 200)
// 绘制完成后执行回调，API 1.7.0
canvas.draw(false, function(res){
// 2. 获取图像数据， API 1.9.0
wx.canvasGetImageData({
canvasId: canvasID,
x: 0,
y: 0,
width: 300,
height: 200,
success(res) {
// 3. png编码
let pngData = upng.encode([res.data.buffer], res.width, res.height)
// 4. base64编码
let base64 = wx.arrayBufferToBase64(pngData)
// ...
that.setData({
imgbase64: base64
})
}
孝饥碧 })
})
}
})
}
5. 实现
need-to-insert-img
need-to-insert-img
tips
画布画的图片的长和宽是固定的，这个按照自己需求设置。
可以通过小程序的
wx.getImageInfo(OBJECT)
获取长和宽
相关链接
upng.js: https://github.com/photopea/UPNG.js
wx-cardscanner: https://github.com/zh8637688/wx-cardscanner 有时候会遇到后端需要前端获取的图片文件转换成base64，在传给后台
小程序有专门的选择图片接口，
但是这个只是返回一个图片的临时路径，并不是文件数据本身。
小程序暂时没有接口直接转base64的
所以我们需要使用canvas和canvasGetImageData（小程序版本1.9.0以后要才有）先获取图片内容，
再通过插件upng.js插件实现图片转base64（所需插件文件附件中）
1. 把upng.js和pako.min.js文件放到项目中
2. 在pages下的页面js文件中导入
var upng = require('../../utils/upng.js');
这里只需要导入npng.js ，pako.min.js是在npng,js里面调用
3. 建一个canvas
chooseImage">人脸测试
// 画布
// 生成base64位图片展示 变量imgbase64
4. 添加js点击chooseImage事件
chooseImage: function() {
var that = this;
var coss_signature = wx.getStorageSync('cos_signature');
var canvasID = "imgCanvas";
var canvas = wx.createCanvasContext(canvasID)
wx.chooseImage({
sourceType: ['album', 'camera'],
sizeType: ['original'],
count: 1,
success: function (res) {
var tempFilePaths = res.tempFilePaths;
// 获取文件路径
var filePath = tempFilePaths[0];
// 1. 绘制图片至canvas
canvas.drawImage(filePath, 0, 0, 300, 200)
// 绘制完成后执行回调，API 1.7.0
canvas.draw(false, function(res){
// 2. 获取图像数据， API 1.9.0
wx.canvasGetImageData({
canvasId: canvasID,
x: 0,
y: 0,
width: 300,
height: 200,
success(res) {
// 3. png编码
let pngData = upng.encode([res.data.buffer], res.width, res.height)
// 4. base64编码
let base64 = wx.arrayBufferToBase64(pngData)
// ...
that.setData({
imgbase64: base64
})
}
})
})
}
})
}
5. 实现
tips
画布画的图片的长和宽是固定的，这个按照自己需求设置。
可以通过小程序的
获取长和宽
相关链接
upng.js: https://github.com/photopea/UPNG.js
wx-cardscanner: https://github.com/zh8637688/wx-cardscanner
‘肆’ PHP 如何把图片转成 BASE64 编码
请试一试下面的代码
<?php
$img=羡毕'图片地址.jpg';
$base64_img=base64EncodeImage($img);
绝喊
echo'<imgsrc="'并派野.$base64_img.'"/>';
functionbase64EncodeImage($image_file){
$base64_image='';
$image_info=getimagesize($image_file);
$image_data=fread(fopen($image_file,'r'),filesize($image_file));
$base64_image='data:'.$image_info['mime'].';base64,'.chunk_split(base64_encode($image_data));
return$base64_image;
}
?>
试一试！
‘伍’ c++如何将图片转base64
base64可以将不可显示歼卜的编码转换成可显示的编码，以便于存储。比如http一般传输的是文本格式的报文，如果要传输图片，那么就要先将图片编码成base64的报文传输，然后在客客户端显示的时闭游候，将base64的报文解密，转换成二进制的图片轿改销数据显示。下面给出源代码，可以直接在linux,msvc环境下进行编译。
详情见http://blog.csdn.net/chenxiaohua/article/details/4084602
‘陆’ H5调用手机相机和相册，并且将图片转化为base64的格式
之前在做 见到 的时候有一个需求是更换头像，于是乎就开始各种趟坑，宴慧纤晌仿还好搞出来了，之前忙着上线，没时间整理，现在抽空整理一下。本补充一下，这个项目是很早的项目，用的还是jq
，h5,写的还不是vue全家桶。
结束：
这样就完成了一个上传图片的并转换为base64的功能。之前的项目，没有封装碧手，直接用就好了。
‘柒’ react native 把图片转成base64
这里用到的是 react-native-fs这个组件 把本地图片转成base64
关于组件首陪的使用 请参考 https://github.com/itinance/react-native-fs
下面就说下如何利用这个组件转成base64:
如果网页上查看 请书写正正握确的格式举芹庆这个是 jpeg的图片格式如下：
data:image/jpeg;base64,