基于vue的图片上传压缩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>基于vue的图片上传压缩</title></head> <body> <input class="hiddenInput" type="file" name="uploadFile" id="imageFile" accept="image/*" @change="uploadImg($event)"/> </body> </html> <script> //图片压缩// function photoCompress(file) { return new Promise((resolve, reject) => { let reader = new FileReader(); reader.onload = function () { img.src = e.target.result; } reader.onerror = function (e) { reject(e); } reader.readAsDataURL(file); img.onload = function () { resolve(img); } img.onerror = function () { reject(e); } }) } //canvas绘制图片// function canvasDataURL(img, type, mx, mh) { return new Promise((resolve, reject) => { let canvas = document.createElement('canvas'); let context = canvas.getContext('2d'); let ctx = canvas.getContext('2d'); let quality = 0.7// 默认图片质量为0.7// // 创建属性节点 let anw = document.createAttribute('width') anw.nodeValue = mx let anh = document.createAttribute('height') anh.nodeValue = mh canvas.setAttributeNode(anw) canvas.setAttributeNode(anh) ctx.drawImage(img, 0, 0, mx, mh); // 图像质量 // // if (file.size > 300 * 1024) { quality = 0.3 } // quality值越小，所绘制出的图像越模糊// let base64 = canvas.toDataURL('image/jpeg', quality) resolve(base64) }) } function convertBase64UrlToBlob(urlData) { let arr = urlData.split(',') let mime = arr[0].match(/:(.*?);/)[1] let bstr = atob(arr[1]) let n = bstr.length let u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new Blob([u8arr], {type: mime}) } //上传// async function upload(file) { const img = await photoCompress(file); const blob = await canvasDataURL(img, file.type, 1000, 1000); } function convertBase64UrlToBlob(urlData) { let arr = urlData.split(',') let mime = arr[0].match(/:(.*?);/)[1] let bstr = atob(arr[1]) let n = bstr.length let u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new Blob([u8arr], {type: mime}) } function canvasDataURL(path, file, callback) { let img = new Image() img.src = path img.onload = function () { const { originWidth, height: originHeight} = img; // 默认按比例压缩 let w = img.width let h = img.height let quality = 0.7 // 默认图片质量为0.7 // 生成canvas let canvas = document.createElement('canvas') let ctx = canvas.getContext('2d') // 创建属性节点 let anw = document.createAttribute('width') anw.nodeValue = w let anh = document.createAttribute('height') anh.nodeValue = h canvas.setAttributeNode(anw) canvas.setAttributeNode(anh) ctx.drawImage(img, 0, 0, w, h) // 图像质量 console.log(`压缩之前的大小：${file.size / 1024}kb`) if (file.size > 300 * 1024) { quality = 0.3 } // quality值越小，所绘制出的图像越模糊 let base64 = canvas.toDataURL('image/jpeg', quality) callback(base64) } } function photoCompress(file, objDiv) { let reader = new FileReader() reader.readAsDataURL(file) reader.onload = function () { let result = this.result; let img = canvasDataURL(result, file, objDiv) } } document.getElementById("imageFile").addEventListener("change", function (e) { upload(e); }) function upload(e) { const file = e.target.files[0]; photoCompress(file, function (base64Codes) { let form = new FormData(); let bl = convertBase64UrlToBlob(base64Codes); console.log(`压缩之后的大小：${bl.size / 1024}kb`) }); } </script>
上传文件压缩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>上传文件压缩</title></head> <body> <div> <h3>图片上传压缩</h3> <input type="file" id="file" placeholder="请上传图片" accept="image/*"/> </div> </body> </html> <script> document.getElementById("file").addEventListener("change", function (e) { console.log("压缩前", e.target.files[0].size); let result = e.target.files[0]; opload(result); }) function readImg(file) { return new Promise((resolve, reject) => { const img = new Image(); const reader = new FileReader(); reader.onload = function (e) { img.src = e.target.result; console.log(e); } reader.onerror = function (e) { reject(e); } reader.readAsDataURL(file); img.onload = function () { resolve(img); } img.onerror = function () { reject(e); } }) } //图片压缩 function compressImg(img, type, mx, mh) { return new Promise((resolve, reject) => { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); const { originWidth, height: originHeight} = img; // 最大尺寸限制 const maxWidth = mx; const maxHeight = mh; // 目标尺寸 let targetWidth = originWidth; let targetHeight = originHeight; if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > 1) { // 宽图片 targetWidth = maxWidth; targetHeight = Math.round(maxWidth * (originHeight / originWidth)) } else { // 高图片 targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth / originHeight)); } } canvas.width = targetWidth; canvas.height = targetHeight; context.clearRect(0, 0, targetWidth, targetHeight); // 图片绘制 context.drawImage(img, 0, 0, targetWidth, targetHeight); canvas.toBlob(function (blob) { console.log(blob); resolve(blob); }, type || 'image/png') }) } async function opload(file) { const img = await readImg(file); console.log(img); const blob = await compressImg(img, file.type, 1000, 1000); const formData = new FormData(); console.log("压缩后", blob); formData.append("file", blob, `file_${Date.parse(new Date())}.jpg`); } </script>
vue
<template>
<div>
<input class="hiddenInput" type="file" name="uploadFile" id="imageFile" accept="image/*"
@change="uploadImg($event)"/>
</div>
</template>
<script>
export default {
data() {
return {
}
},
created() {
},
methods: {
uploadImg(e) {
const file = e.target.files[0];
this.photoCompress(file, (base64Codes) => {
let form = new FormDate();
form.append("op;loadFile", b1, `file_${Date.parse(new Date())}.jpg`);
UploadImgInClaim(form).then((res) => {
if (res.status) {
let url = window.URL.createObjectURL(file);
}
}).catch((err) => {
console.log(err);
})
})
},
//图片压缩
photoCompress(file, objDiv) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
let result = this.result;
this.canvasDataURL(result, file, objDiv);
}
},
canvasDataURL(path, file, callback) {
let img = new Image();
img.src = path;
img.onload = function () {
let _this = this;
//按比例默认缩放
let w = _this.width;
let h = _this.height;
let quality = 0.7;
//生成canvas
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
//创建属性节点 // 创建属性节点
let anw = document.createAttribute('width')
anw.nodeValue = w
let anh = document.createAttribute('height')
anh.nodeValue = h
canvas.setAttributeNode(anw)
canvas.setAttributeNode(anh)
ctx.drawImage(_this, 0, 0, w, h)
// 图像质量
console.log(`压缩之前的大小：${file.size / 1024}kb`)
if (file.size > 300 * 1024) {
quality = 0.3
}
// quality值越小，所绘制出的图像越模糊
let base64 = canvas.toDataURL('image/jpeg', quality)
callback(base64)
}
},
convertBase64UrlToBlob(urlData) {
let arr = urlData.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type: mime})
}
}
}
</script>
<style>
</style>