js 文件转换
<template>
<div class="test">
<div class="block">
<span class="demonstration">默认为 Date 对象</span>
<div class="demonstration">
值：{{ value1 }}
</div>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
/>
</div>
<div class="block">
<span class="demonstration">使用 value-format</span>
<div class="demonstration">
值：{{ value2 }}
</div>
<el-date-picker
v-model="value2"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
/>
</div>
<div class="block">
<span class="demonstration">时间戳</span>
<div class="demonstration">
值：{{ value3 }}
</div>
<el-date-picker
v-model="value3"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="timestamp"
/>
</div>
</div>
</template>
<script>
export default {
data () {
return {
value1: '',
value2: '',
value3: ''
}
},
computed: {
viseble () {
return this.$store.state.person.account.visible
}
},
mounted () {
// this.urltoImage('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2913637001,744957801&fm=26&gp=0.jpg', (img) => {
// window.console.log(img)
// const body = document.querySelector('body')
// body.appendChild(img)
// })
// -------------------
// const self = this
// this.urltoImage('http://119.45.241.175:5000/File/IdCard/f482421b0d794483ba337266433ba308big.jpg', (img) => {
// window.console.log(img) // image 对象
// const cav = this.imagetoCanvas(img)
// this.canvasResizetoFile(cav, 0.99, (blod) => {
// window.console.log(blod)
// // window.console.log(!(blod.size / 1024 / 1024 < 2))
// // self.filetoDataURL(blod, (dataUrl) => {
// // // window.console.log(dataUrl)
// // window.console.log(self.dataURLtoFile(dataUrl))
// // })
// const File = self.blobToFile(blod, 'change.jpg')
// window.console.log(File)
// })
// // const body = document.querySelector('body')
// // body.appendChild(cav)
// })
const serverUrl = 'http://119.45.241.175:5000/File/IdCard/f482421b0d794483ba337266433ba308big.jpg'
// this.urltoImage(serverUrl, (img) => {
// window.console.dir(img)
// })
this.downloadIamge(serverUrl, 123)
},
methods: {
clickHandle () {
this.$store.commit('person/account/CHANG_VISIBLE', 'edit')
},
downloadIamge (imgsrc, name) { // 下载图片地址和图片名
// this.imageUrl = URL.createObjectURL(file.raw);
const image = new Image()
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function () {
const canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
const context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
const url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
window.console.log(url)
const a = document.createElement('a') // 生成一个a元素
const event = new MouseEvent('click') // 创建一个单击事件
a.download = name || 'photo' // 设置图片名称
a.href = url // 将生成的URL设置为a.href属性
a.dispatchEvent(event) // 触发a的单击事件
}
image.src = imgsrc
},
// https://cunchu.51240.com/
// https://www.cnblogs.com/lwxiao/p/10519617.html
// https://blog.csdn.net/zhoudekuai/article/details/88360076
// urltoImage(url,fn) 会通过一个url加载所需要的图片对象，其中 url 参数传入图片的 url , fn 为回调方法,包含一个Image对象的参数
urltoImage (url, fn) {
const img = new Image()
img.crossOrigin = 'Anonymous'
img.src = url
img.onload = function () {
fn(img)
}
},
// imagetoCanvas(image) 会将一个 Image 对象转变为一个 Canvas 类型对象，其中 image 参数传入一个Image对象
imagetoCanvas (image) {
const cvs = document.createElement('canvas')
const ctx = cvs.getContext('2d')
cvs.width = image.width
cvs.height = image.height
ctx.drawImage(image, 0, 0, cvs.width, cvs.height)
return cvs
},
// canvasResizetoFile(canvas,quality,fn) 会将一个 Canvas 对象压缩转变为一个 Blob 类型对象；其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量; fn 为回调方法，包含一个 Blob 对象的参数
canvasResizetoFile (canvas, quality, fn) {
canvas.toBlob(function (blob) {
fn(blob)
}, 'image/jpeg', quality)
},
filetoDataURL (file, fn) {
const reader = new FileReader()
reader.onloadend = function (e) {
fn(e.target.result)
}
reader.readAsDataURL(file)
},
dataURLtoImage (dataurl, fn) {
const img = new Image()
img.onload = function () {
fn(img)
}
img.src = dataurl
},
dataURLtoFile (dataurl) {
const arr = dataurl.split(','); const mime = arr[0].match(/:(.*?);/)[1]
const bstr = atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
},
blobToFile (theBlob, fileName) {
// A Blob() is almost a File() - it's just missing the two properties below which we will add
theBlob.lastModifiedDate = new Date()
theBlob.name = fileName
return theBlob
}
// proDownImage (path, imgObj) { // 等比压缩图片工具
// // var proMaxHeight = 185;
// const proMaxHeight = 300
// const proMaxWidth = 175
// const size = new Object()
// const image = new Image()
// image.src = path
// image.attachEvent('onreadystatechange',
// function () { // 当加载状态改变时执行此方法,因为img的加载有延迟
// if (image.readyState == 'complete') { // 当加载状态为完全结束时进入
// if (image.width > 0 && image.height > 0) {
// const ww = proMaxWidth / image.width
// const hh = proMaxHeight / image.height
// const rate = (ww < hh) ? ww : hh
// if (rate <= 1) {
// alert('imgage width*rate is:' + image.width * rate)
// size.width = image.width * rate
// size.height = image.height * rate
// } else {
// alert('imgage width is:' + image.width)
// size.width = image.width
// size.height = image.height
// }
// }
// }
// imgObj.attr('width', size.width)
// imgObj.attr('height', size.height)
// })
// }
}
}
</script>
<style lang="scss" scoped>
.test {}
</style>
