Canvas 上传图片 实行 图片压缩

50 阅读1分钟
import { ref } from "vue";
import{saveAs }from "file-saver"

let base64Url = ref("");
let img1 = ref(null);
let div1 = ref(null);
//input 上传函数
function filechange(e){
let file = e.target.files[0];
console.log(file);
//预览 file-base64
let fr = new FileReader();
fr.readAsDataURL(file);
fr.onload =function(){
base64Url.value =fr.result;
//$nexttick
setTimeout(()=>{
let pressCanvas=document.createElement("canvas");
pressCanvas.width=img1.value.width;
pressCanvas.height = img1.value.heightlet 
ctx= pressCanvas.getContext("2d");
ctx.drawImage(img1.value,0,0,img1.value.width, img1.value.height);
pressCanvas.toBlob((blgb)=>{
//blob传个后端
let form = new FormData();
form.append("file",blob);
axios .post("xxxx",form)
},"image/jpeg"0.4)
}