下载图片,记录一下

<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)

			// //转换成file对象
			this.crooperImg = canvas.toDataURL('images/png');
            a.download = '球员评估-完整版.png';
            // 设置 a href 属性
            a.setAttribute("href", this.crooperImg);
            // 触发 a 点击事件
            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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值