Background Description: Recently doing a mobile terminal function of h5 to upload pictures, originally this feature is not complicated, just need to upload image files by axios service side, but considering the now mobile phones with camera function is very powerful, can easily WuLiuZhao literally a photograph, and upload pictures are server-side requirements must be less than two million, and directly pass this big picture, Bandwidth is too much, so compression of the front end is a necessary link.

Ideas:

Step 1: The image is selected to trigger the change event, first judge whether the current image is greater than the background requirements, if so, compress the image, otherwise, directly upload.

// Handle (evt) {const maxSize = 2 * 1024 * 1024 this.loading = true const file = Array.prototype.slice.call(evt.target.files)[0] let render = new FileReader() render.readAsDataURL(file) render.onload =  (e) => { if (file.size > maxSize) { let img = new Image() img.src = e.target.result img.onload = () => { const data = This.press (img) if (data.length > maxSize) {this.$toast(' image/jpeg')} else {this.upload(data, 'image/jpeg', file.name) } } } else { this.upload(e.target.result, file.type, file.name) } } },Copy the code

Step 2: Compress Compress method

Compress (img) {// Canvas let canvas = document.createElement("canvas") let CTX = canvas. GetContext ('2d') // Canvas var tCanvas = document.createElement("canvas") var TCTX = tCanvas. GetContext ("2d") let initSize = Img. Src. length let width = img.width let height = img.height // If the image is larger than 4 million pixels, Var ratio if ((ratio = width * height / 4000000) > 1) {ratio = math.sqrt (ratio) width /= ratio height /= ratio} else {ratio = 1} canvas.width = width canvas.height = height //  0, canvas.width, Var count if ((count = width * height / 1000000) > 1) {count = Math.sqrt(count) + 1) var nw = ~~(width/count) var nh = ~~(height/count) tCanvas.width = nw tCanvas.height = nh for (var i = 0; i < count; i++) { for (var j = 0; j < count; j++) { tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio * 2, nh * ratio * 2, 0, 0, nw, nh) ctx.drawImage(tCanvas, i * nw, j * nh, nw * 2, nh * 2) } } } else { ctx.drawImage(img, 0, 0, width * 2, // Let ndata = canvas. ToDataURL ('image/jpeg', 0.8) console.log(' before compression: '+ initSize) console.log(' after compression:') '+ ndata.length) console.log(' Compression rate:' + ~~(100 * (initSize - ndata.length)/initSize) + '%') return ndata},Copy the code

Step 3: Upload pictures

Upload (basestr, type, name){ let text = window.atob(basestr.split(",")[1]) let buffer = new ArrayBuffer(text.length) let ubuffer = new Uint8Array(buffer) for (let i = 0; i < text.length; i++) { ubuffer[i] = text.charCodeAt(i) } let Builder = window.WebKitBlobBuilder || window.MozBlobBuilder let blob if (Builder) { let builder = new Builder() builder.append(buffer) blob = builder.getBlob(type) } else { blob = new window.Blob([buffer], {type: type}) } let formdata = new FormData() formdata.append('file', blob) formdata.append('certType', this.certType) formdata.append('desCountryAreaCode', this.orderInfo.order.receiverCountryCode) formdata.append('ieFlag', this.ieFlag) formdata.append('postFlag', this.postFlag) formdata.append('srcCountryAreaCode', this.orderInfo.order.senderCountryCode) this.$httpExt().post(this.apiUrl.upload.uploadImg, formdata).then((res) => { if (res.data && res.code == 0) { this.imgList.push({ imgSrc: basestr, fileNo: res.data[0] }) this.$emit('update:imgList', this.imgList) } }).finally(() => { this.loading = false }) }Copy the code