请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

技术分享 图片转Base64

2
回复
2512
查看
[复制链接]

1

主题

1

帖子

10

积分

 楼主| 2019-9-25 17:17:51 显示全部楼层 |阅读模式
需求是这样的:调用手机摄像头拍照然后调用API,接口需要一个base64的图片String。 代码如下,防止图片过大我做了压缩 1.拍摄图片 this.$element('camera').takePhoto({ // 通过quality参数设置照片质量 quality: _this.photoQuality, success(data) { // 获取回调中的照片地址 _this.pictureUrl = data.uri console.info('compressimg before' + data.uri) image.compressImage({ uri: data.uri, radio: 2, // 变为原图的1/2大小 format: 'JPEG', success: function (data) { console.info('compressimg' + data.uri) fileimpl.readArrayBuffer({ uri: data.uri, success: function (temp) { // console.log('base64===' + _arrayBufferToBase64(temp.buffer)) var strBase64 = _arrayBufferToBase64(temp.buffer) _this.visible = '0' }, fail: function (data, code) { console.info('base64=== error') _this.visible = '0' } }) }, fail: function (data, code) { console.info(`handling fail, code = ${code}`) _this.visible = '0' } }) }, fail(data, code) { _this.visible = '0' console.info('take photos failed:code' + code.code) }, complete() { console.info('complete') } }) 2.图片转Base64代码 function _arrayBufferToBase64(raw) { var base64 = '' var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/' var bytes = new Uint8Array(raw) var byteLength = bytes.byteLength; var byteRemainder = byteLength % 3 var mainLength = byteLength - byteRemainder var a, b, c, d var chunk // Main loop deals with bytes in chunks of 3 for (var i = 0; i < mainLength; i = i + 3) { // Combine the three bytes into a single integer chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2] // Use bitmasks to extract 6-bit segments from the triplet a = (chunk & 16515072) >> 18 // 16515072 = (2^6 - 1) << 18 b = (chunk & 258048) >> 12 // 258048 = (2^6 - 1) << 12 c = (chunk & 4032) >> 6 // 4032 = (2^6 - 1) << 6 d = chunk & 63 // 63 = 2^6 - 1 // Convert the raw binary segments to the appropriate ASCII encoding base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d] } // Deal with the remaining bytes and padding if (byteRemainder == 1) { chunk = bytes[mainLength] a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2; // Set the 4 least significant bits to zero b = (chunk & 3) << 4 // 3 = 2^2 - 1; base64 += encodings[a] + encodings[b] + '==' } else if (byteRemainder == 2) { chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1] a = (chunk & 16128) >> 8 // 16128 = (2^6 - 1) << 8; b = (chunk & 1008) >> 4 // 1008 = (2^6 - 1) << 4; // Set the 2 least significant bits to zero c = (chunk & 15) << 2 // 15 = 2^4 - 1; base64 += encodings[a] + encodings[b] + encodings[c] + '=' } // return 'data:image/jpeg;base64' + base64 return base64 }
回复

使用道具 举报

0

主题

5

帖子

25

积分

2021-1-7 15:10:14 显示全部楼层
fileimpl这是个什么对象呢
回复

使用道具 举报

2

主题

3

帖子

25

积分

2022-9-22 15:11:30 显示全部楼层
楼主的方法转化有些图片会有问题,与后端解析出来的不一致导致接口失败。所以我去网上找到一个新的替代方案,每次都能对得上: function arrayBufferToBase64(array) { array = new Uint8Array(array); var length = array.byteLength; var table = ['A','B','C','D','E','F','G','H', 'I','J','K','L','M','N','O','P', 'Q','R','S','T','U','V','W','X', 'Y','Z','a','b','c','d','e','f', 'g','h','i','j','k','l','m','n', 'o','p','q','r','s','t','u','v', 'w','x','y','z','0','1','2','3', '4','5','6','7','8','9','+','/']; var base64Str = ''; for(var i = 0; length - i >= 3; i += 3) { var num1 = array[i]; var num2 = array[i + 1]; var num3 = array[i + 2]; base64Str += table[num1 >>> 2] + table[((num1 & 0b11) << 4) | (num2 >>> 4)] + table[((num2 & 0b1111) << 2) | (num3 >>> 6)] + table[num3 & 0b111111]; } var lastByte = length - i; if(lastByte === 1) { var lastNum1 = array[i]; base64Str += table[lastNum1 >>> 2] + table[((lastNum1 & 0b11) << 4)] + '=='; } else if(lastByte === 2){ var lastNum1 = array[i]; var lastNum2 = array[i + 1]; base64Str += table[lastNum1 >>> 2] + table[((lastNum1 & 0b11) << 4) | (lastNum2 >>> 4)] + table[(lastNum2 & 0b1111) << 2] + '='; } return base64Str; }
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册