Canvas怎么实现上传并压缩图片

js上传图片

我们要清楚，图片的展示方式有三种：分别为file(文件流)、bolb(本地流)、base64(二进制流)

file

file 接口提供有关文件的信息，并允许网页中的 javascript 访问其内容。

通常情况下， file 对象是来自用户在一个 元素上选择文件后返回的 filelist 对象,也可以是来自由拖放操作生成的 datatransfer 对象，或者来自 htmlcanvaselement 上的 mozgetasfile() api。在gecko中，特权代码可以创建代表任何本地文件的file对象，而无需用户交互

file 对象是特殊类型的 blob，且可以用在任意的 blob 类型的 context 中。比如说， filereader, url.createobjecturl(), createimagebitmap(), 及 xmlhttprequest.send() 都能处理 blob 和 file。

blob

blob 对象表示一个不可变、原始数据的类文件对象。指向的是本地的临时地址，blob 表示的不一定是javascript原生格式的数据。file 接口基于blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

base64

base64 是一组相似的二进制到文本（binary-to-text）的编码规则，使得二进制数据在解释成 radix-64 的表现形式后能够用 ascii 字符串的格式表示出来。base64 这个词出自一种 mime 数据传输编码。如果是图片的base64，可以是可以用来压缩

他们之间是可以相互转化的，上传图片一般会拿到blob和file

图片压缩

压缩我们选用canvas来进行压缩，todataurl方式会把图片自动转成base64

使用canvas压缩图片*代码

export function translate(imgdata, callback) {
    
	var img = new image();
    
	img.src = imgdata.tempfilepaths[0];

	img.onload = function() {
    
		var that = this;
    
		var h = that.height;
     // 保证压缩后的高度一样		
		var w = that.width;
      // 保证压缩后的宽度一样
		var canvas = document.createelement('canvas');
     //创建canvas
		var ctx = canvas.getcontext('2d');
     //2d格式
		// 创建宽高属性，并给canvas新的属性节点
		var anw = document.createattribute("width");
    
		anw.nodevalue = w;
    
		var anh = document.createattribute("height");
    
		anh.nodevalue = h;
    
		canvas.setattributenode(anw);
    
		canvas.setattributenode(anh);
    
		ctx.drawimage(that, 0, 0, w, h);
     // 绘画到canvas里面		
		var quality = 0.1;
     //可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略
		var base64 = canvas.todataurl('image/jpeg', quality);
    //转换成base64
		canvas = null;
    
		var res = dataurltofile(base64,imgdata.tempfiles[0].name);
    
		callback(res);

	}

}
 

base64转file*代码

function base64tofile(dataurl, filename) {
     //将base64转换为文件
	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转blob*代码

function base64toblob(dataurl) {
     //base64转blob
    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 blob([u8arr], {
 type: mime }
    );

}

blob转base64*代码

function blobtobase64(blob, callback) {
     //blob转base64
    let reader = new filereader();

    reader.onload = function (e) {
     callback(e.target.result);
 }
    
    reader.readasdataurl(blob);

}

除了以上的方法也可以使用canvas转化成base64

blob转file*代码

方法一：

function blobtofile(blob, filename, type) {
  //blob转file
    let files = new window.file([blob], filename, {
type: type}
)
    return files
}

方法二：

function blobtofile(blob, filename){
      // blob转file
	blob.lastmodifieddate = new date();
      
	blob.name = filename;
      
	return blob;

}
    ;

file转bse64*代码

function filetobase64（file）{
       //file转bse64
	let reader = new filereader();
      
	reader.readasdataurl(file);
  
	reader.onload = function (e) {
    
		return e.target.result  
	}

}
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！