如何使用html5进行图片压缩上传？

chisfee 2020-03-10 00:56:28

涉及到H5图片压缩，第一应该想到的是canvas的图片处理api。
先利用canvas.toDataURL('"image/jpeg",quality)中的quality参数进行图片压缩范围是0~1之间，再将图片base64格式转化为blob对象，最后使用formData和正常图片上传流程一样。

0 0 0

lincimy 2020-03-10 03:42:15

1.获取到图片的base64格式；
2.图片加载完成后，把图片转化为canvas；
3.使用canvas的toDataURL按照自己的需要进行压缩；
4.把dataURL转化成blob对象；
5.把blob对象转化成formData对象，最后按照ajax接口调用方式提交；

0 0 0

webVueBlog 2020-03-10 14:01:38

H5:进行图片压缩上传

<canvas canvas-id='attendCanvasId' class='myCanvas' :style="'width:' + imageSize.imageWidth + 'px; height:' + imageSize.imageHeight  + 'px;'"></canvas>

imageSize: '',

压缩代码：

// 压缩图片
paressImage: function(image, fn) {
	let img = new Image()
	// 要给对象图片的路径
	img.src = image.path
	let canvas = document.createElement('canvas');
	let ctx = canvas.getContext('2d')
	// 最大尺寸限制
	var maxWidth = 500,
		maxHeight = 500;
	var canvasWidth, canvasHeight;
	// 取得压缩后得高宽
	if (image.width > image.height) {
		if (image.width > maxWidth) {
			canvasWidth = maxWidth;
			canvasHeight = image.height * (canvasWidth / image.width)
		} else {
			canvasWidth = image.width;
			canvasHeight = image.height;
		}
	} else {
		if (image.height > maxHeight) {
			canvasHeight = maxHeight;
			canvasWidth = image.width * (canvasHeight / image.height);
		} else {
			canvasWidth = image.width;
			canvasHeight = image.height;
		}
	}
	canvas.width = canvasWidth
	canvas.height = canvasHeight
	// 图片画在画布上
	ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight)
	// 图片资源
	canvas.toBlob((fileSrc) => {
		console.log('fileSrc', fileSrc)
		var imgSrc = window.URL.createObjectURL(fileSrc)
		fn(imgSrc);
	}, 'image/png', 0.50);

},

图片上传：

uploadFile

url: this.$store.state.baseUrl + '/manage/upload/upload_file',
filePath: imgSrc,
fileType: 'image',
name: 'file',
...
var obj = JSON.parse(uploadFileRes.data)
this.query.image = obj.data.img_url

0 0 0

longhui520 2020-03-10 14:44:09

   function photoCompress(file,options, callback) {
       var ready = new FileReader();
       ready.readAsDataURL(file);
       ready.onload = function () {
           var base64Url = this.result;
           canvasDataURL(base64Url, options, callback)
       }
    }
    //options可以是设置压缩后的图片的宽高或者压缩比例
    function canvasDataURL(base64Url, options, callback) {
       var img = new Image();
       img.src = base64Url;
       img.onload = function () {
           var that = this;
           // 默认按比例压缩
           var w = that.width,
               h = that.height,
               scale = w / h;
           w = options.width || w;
           h = options.height || (w / scale);
           var quality = 0.7; // 默认图片质量为0.7
           //生成canvas
           var canvas = document.createElement('canvas');
           var ctx = canvas.getContext('2d');
           // 创建属性节点
           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);
           // 图像质量
           if (options.quality && options.quality <= 1 && options.quality > 0) {
               quality = options.quality;
           }
           // quality值越小，所绘制出的图像越模糊
           var base64 = canvas.toDataURL('image/jpeg', quality);
           // 回调函数返回base64的值
           callback(base64);
       }
       function convertBase64UrlToBlob(urlData) {
           var arr = urlData.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
           });
       }
       photoCompress(file,{quality:0.1},function(base64Codes){
           var bob = convertBase64UrlToBlob(base64Codes);
           //修改文件名或上传
       })
       //1. 获取到文件对象，转成base64URL，
       //2. 根据base64URL 获取到图片的宽高，生成canvans
       //3. canvans 对象根据压缩比例，生成base64URL
       //4. base64URL生成blob对象

0 0 0

[html] 如何使用html5进行图片压缩上传？