uniapp-微信小程序-图片转base64-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp-微信小程序-图片转base64。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

当前在做得小程序设计拍照识别，而服务器方需要前端提供图片的base64编码作为参数进行解析识别，一开始想着走原生JS的base64方法——借助canvas，当然我也试了，就在自己觉得没问题的时候，调试时终端报错了：ReferenceError: Image is not defined.

我着实懵了，也就是说Image对象实例化在小程序这边是无效的，查资料后真的很打脸，虽然人家微信不给Image用，但是人家给提供了转base64的方法。咱直接用就行了，唉，要是早一点对目标问题进行查询，早点看文档也许不用走一遭弯路喽。

我的需求：

1、图像来源：可以拍照，也可以从相册上传进行图像识别

2、后端限制：只对png、jpeg格式图片进行识别处理

getPhoto(){
	uni.chooseMedia({
		count:1,// 限制选取图像数量
		mediaType:["image"],// 设置选取资源为图片类型
		sourceType:["album","camera"],// 设置图像来源：相册或相机
		camera:"back",// 设置相机为后置摄像头
		success:(res)=>{
			// 获取微信拿到的图片的临时地址并保存到本地
			this.photoPath=res.tempFiles[0].tempFilePath;
			// 获取当前图片信息
			uni.getImageInfo({
				src: res.tempFiles[0].tempFilePath,
				success: (image)=> {
					// 做png/jpeg的类型判断————对不同类型的图像添加不同的转换头信息
					if(image.type=='png'||image.type=='jpeg'){
						// 对符合类型的图片转换为base64类型
						uni.getFileSystemManager().readFile({// 【重点来啦】人家自提供的转码API
							filePath:image.path,// 所需转码图像路径
							encoding:"base64",// 转码类型
							success:(res)=>{
								// 生成base64
								let imageBase64='data:image/'+image.type+';base64,'+res.data;
								console.log('转base64后：',imageBase64);
							}
						})
					}else{// 友好一点，不是以上类型做出提醒
						uni.showToast({
							title:'当前只支持png/jpeg格式',
							duration:2500,
							icon:'none'
						})
					}
				}
			});
		}
	})
},

如果看上去有些乱，可以看下面这个，也就是uni/wx提供的转码方法：

// （由于uniapp开发所以uni打头）
uni.getFileSystemManager().readFile({// 【重点来啦】人家自提供的转码API
	filePath:image.path,// 所需转码图像路径
	encoding:"base64",// 转码类型
	success:(res)=>{
	    // 生成base64
	    let imageBase64='data:image/'+image.type+';base64,'+res.data;
	    console.log('转base64后：',imageBase64);
	}
})

原生JS-canvas图像转base64的写法是这样的：（用到了jQuery的Deferred，记得引jQuery）文章来源地址https://www.toymoban.com/news/detail-539999.html

let imgSrc = "";// 图片地址（可本地可网络）
//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
function getBase64Image(img, width, height) {
  var canvas = document.createElement("canvas");
  canvas.width = width ? width : img.width;
  canvas.height = height ? height : img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  var dataURL = canvas.toDataURL();
  return dataURL;
}

function getCanvasBase64(img) {
  var image = new Image();
  //至关重要-允许跨域
  image.crossOrigin = '';
  image.src = img;
  //至关重要——借用jQuery的Deferred方法
  var deferred = $.Deferred();
  if (img) {
	image.onload = function () {
	  deferred.resolve(getBase64Image(image));//将base64传给done上传处理
	  // document.getElementById("container2").appendChild(image);// 测试时用于页面显示
	}
	return deferred.promise();//要让onload完成后再return
  }
}

getCanvasBase64(imgSrc)
  .then(function (base64) {
    // 转成之后的就是base64了
	console.log("转base64：",base64);
  }, function (err) {
	console.log(err);
});

到了这里，关于uniapp-微信小程序-图片转base64的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！