<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<van-uploader :after-read="afterRead" />
<img :src="img" alt="">
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.5/lib/vant.min.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
visible: false,
img:''
}
},
methods: {
dataURLtoFile(dataurl, filename) { // 将base64转换为file文件
// debugger
let arr = dataurl.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 File([u8arr], filename, { type: mime })
},
afterRead(file) {
// 此时可以自行将文件上传至服务器
console.log(file);
let canvas = document.createElement('canvas')
// 获取对应的CanvasRenderingContext2D对象(画笔)
let context = canvas.getContext('2d')
// 创建新的图片对象
let img = new Image()
// 指定图片的DataURL(图片的base64编码数据)
img.src = file.content
// 监听浏览器加载图片完成，然后进行进行绘制
img.onload = () => {
canvas.width = 400
canvas.height = 300
context.drawImage(img, 0, 0, 400, 300)
this.img=file.content = canvas.toDataURL(file.file.type, 0.92) // 0.92为默认压缩质量
let files = this.dataURLtoFile(file.content, file.file.name)
console.log(files);
}
}
}
})
</script>
</html>
