<template>
<div>
<div
style="width: 500px;height: 500px;overflow: hidden;"
>
<h1>title</h1>
<img
id="imgBox"
class="img"
width="500px"
src="@/assets/img/product.jpg"
alt=""
>
</div>
<button @click="download">下载</button>
<canvas id="vas"></canvas>
</div>
</template>
<script>
export default {
name: '',
data () {
return {
description: '文件描述',
crooperImg: ''
}
},
created () {
},
computed: {
},
methods: {
download () {
const imgBox = document.getElementById("imgBox");
let canvas = document.getElementById('vas');
let a = document.createElement('a');
canvas.getContext("2d").drawImage(imgBox, 0, 0, 500, 500)
this.crooperImg = canvas.toDataURL('images/png');
a.download = '球员评估-完整版.png';
a.setAttribute("href", this.crooperImg);
a.click();
document.body.removeChild(a);
},
dataURLtoFile (dataurl, filename) {
var arr = dataurl.split(',')
var mime = arr[0].match(/:(.*?);/)[1]
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, { type: mime })
},
}
}
</script>
<style lang="scss" scoped>
</style>