js图片文件的转换

js图片文件的转换

在做H5软件时发现H5获取的图像信息无法直接上传到腾讯的对象存储中，要上传到对象存储要传入的是文件的对象信息，这可用input file标签选取图片可以直接获得文件信息。但是我已经使用了H5的图片选取返回，目前只有一个本地路径要如何将图片上传过去？

解决这个问题的关键是将图片路径转化成腾讯云可以处理的文件对象，使用H5的文件读取将对象上传到腾讯云并不能显示出图片，那就只能通过js专门处理图片在将处理好的图片转成文件对象。

1.图片转Base64
获取到图片路径后可以直接通过路径将图片转为成Base64编码

var image = new Image();
image.src = target;//图片路径
image.onload = function(){ 
  var base64 = getBase64Image(image);
}  

//将图片转成base64 编码
function getBase64Image(img) {
   var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
    var dataURL = canvas.toDataURL("image/"+ext);
    return dataURL;
}

2.Base64转文件
下一步将base64转成文件对象

//第一个参数为base64编码，后一个为文件名因为上传到腾讯云会重命名所以就这里就随便输了
var flie=dataURLtoFile(base64,"ssss");

//base64转文件对象
function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    } 
    return new File([u8arr], filename, {type:mime});
}

3.上传图片
获取到文件对象就能将图片完整的上传到腾讯云了

完整代码

var filename="GS_yhtx/test.jpg";//文件名
//通过H5方法进行图片压缩
 plus.zip.compressImage({  
          src:useeedata.tx,//需要压缩的图片路径  
          dst:"_doc/"+newupimg+".jpg",//保存的图片路径  
          width:'128px',//压缩后图片宽度  
          quality:80,//图片质量  
          overwrite:true//是否覆盖  
      },    
      function(event){   
        //target 压缩完成返回的路径
      	var target = event.target;
      	//size  压缩完成的图片大小 以字节为单位
      	var size = event.size;
      	//图片处理
		var image = new Image();
		image.src = target;
		image.onload = function(){ 
		  //通过路径转base64 
		  var base64 = getBase64Image(image);
		  //通过base64转文件对象
		  var flie=dataURLtoFile(base64,"ssss")
		  //上传到腾讯云
		  cos.putObject({ 
			Bucket: '',//存储桶
			Region: '',//地区
			Key:filename,//文件名
			Body:flie,  //上传文件
			onProgress: function(progressData) {
			}, 
			}, function(err, data) {
			//上传完成拼接上"https://"就可访问图片了
			 plus.storage.setItem("wanitx","https://"+data.Location);
		});	
   }   	 
 },function(error) {   
});    
//base64转文件对象
function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
         bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
     while(n--){
         u8arr[n] = bstr.charCodeAt(n);
     } 
     return new File([u8arr], filename, {type:mime});
}
//将图片转成base64 编码
 function getBase64Image(img) {
     var canvas = document.createElement("canvas");
     canvas.width = img.width;
     canvas.height = img.height;
     var ctx = canvas.getContext("2d");
     ctx.drawImage(img, 0, 0, img.width, img.height);
     var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
     var dataURL = canvas.toDataURL("image/"+ext);
     return dataURL;
}