![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/844cd6c47edd9bc2a89c201b8137596f.png)
<div class="content">
<h1>{{title}}</h1>
<el-button class="sava" type="primary" v-show="show" @click="savecanvas">保存图片</el-button>
<div class="content-view canvas" ref="canvas"> // 用来设置图片的范围
<router-view></router-view>
</div>
</div>
<el-dialog title="保存图片" :visible.sync="dialogVisible" width="30%">
<div>
<span>选择类型:</span>
<el-select v-model="value" placeholder="请选择类型">
<el-option
v-for="item in savemenu[a]"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div>
图片名称:
<el-input v-model="input" placeholder="请输入图片名称"></el-input>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleChange">确 定</el-button>
</span>
</el-dialog>
import html2canvas from 'html2canvas'
savemenu: {
ry: [
{
value: 'all',
label: '全部'
},
{
value: 0,
label: '传销人员统计'
}
],
jy: [
{
value: 'all',
label: '全部'
},
{
value: 0,
label: 'IP和MAC地址数量统计'
},
{
value: 1,
label: '交易渠道统计'
}
]
},
value: '',
handleChange() {
if (this.input) {
if (this.value === 'all') {
this.allPic(this.input)
} else {
this.save(this.value, this.input)
}
this.dialogVisible = false
this.value = ''
this.input = ''
} else {
this.$message.error('内容不能为空')
}
},
save(index, name) {
var canvas = document.getElementsByTagName('canvas')[index]
var MIME_TYPE = 'image/png'
var imgURL = canvas.toDataURL(MIME_TYPE)
var dlLink = document.createElement('a')
dlLink.download = name
dlLink.href = imgURL
dlLink.dataset.downloadurl = [
MIME_TYPE,
dlLink.download,
dlLink.href
].join(':')
document.body.appendChild(dlLink)
dlLink.click()
document.body.removeChild(dlLink)
},
allPic(name) {
let canvas = document.querySelector('.canvas')
let that = this
html2canvas(canvas, { scale: 2, logging: false, useCORS: true }).then(
function (canvas) {
let type = 'png'
let imgData = canvas.toDataURL(type)
let _fixType = function (type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg')
let r = type.match(/png|jpeg|bmp|gif/)[0]
return 'image/' + r
}
imgData = imgData.replace(_fixType(type), 'image/octet-stream')
let filename = name + '.' + type
that.saveFile(imgData, filename)
}
)
},
<div class="content">
<div class="divBtn" v-show="show">
<el-button class="sava" type="primary" @click="generateImage">保存图片</el-button>
</div>
<div class="content-view canvas">
<router-view ref="canvas1"></router-view>
</div>
</div>
generateImage() {
const loading = this.$loading()
html2canvas(this.$refs.canvas1.$el, {
height: this.$refs.canvas1.$el.getBoundingClientRect().height + 50
}).then((canvas) => {
canvas.toBlob((blob) => {
let imgData = canvas.toDataURL('image/png')
let file2 = new File([blob], 'test.png', { type: 'image/png' })
let formData = new FormData()
formData.append('file', file2)
axios({
method: 'post',
url: `${API_HOST}/case/savePhoto`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: formData
})
.then((res) => {
setTimeout(() => loading.close(), 3000)
if (res.status === 200) {
this.$message.success('上传成功')
}
})
.catch((err) => console.log(err))
this.saveFile(imgData, this.downname + '.png')
})
})
},
savecanvas() {
html2canvas(this.$refs.canvas, {
backgroundColor: null
}).then((canvas) => {
canvas.toBlob((blob) => {
let imgData = canvas.toDataURL('image/png')
let file2 = new File([blob], 'test.png', { type: 'image/png' })
let formData = new FormData()
formData.append('file', file2)
formData.append('caseId', 3)
axios({
method: 'post',
url: `${API_HOST}/case/savePhoto`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: formData
})
.then((res) => {
if (res.status === 200) {
this.$message.success('上传成功')
}
})
.catch((err) => console.log(err))
this.saveFile(imgData, Date.now() + '.png')
})
})
},
toImgStyle(dataURI) {
var byteString = atob(dataURI.split(',')[1])
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
var ab = new ArrayBuffer(byteString.length)
var ia = new Uint8Array(ab)
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i)
}
return new Blob([ab], { type: mimeString })
},
saveFile(data, filename) {
let save_link = document.createElementNS(
'http://www.w3.org/1999/xhtml',
'a'
)
save_link.href = data
save_link.download = filename
let event = document.createEvent('MouseEvents')
event.initMouseEvent(
'click',
true,
false,
window,
0,
0,
0,
0,
0,
false,
false,
false,
false,
0,
null
)
save_link.dispatchEvent(event)
}
保存整张图片 包括超出部分 长截图
<div class="content-view canvas">
<router-view ref="canvas1"></router-view>
</div>
savePicture(){
html2canvas(this.$refs.canvas1.$el, {
height: this.$refs.canvas1.$el.getBoundingClientRect().height + 50
}).then((canvas) => {
canvas.toBlob((blob) => {
const imgData = canvas.toDataURL('image/png')
const file2 = new File([blob], this.downname + '.png', {
type: 'image/png'
})
const formData = new FormData()
formData.append('file', file2)
this.saveFile(imgData, this.downname + '.png')
})}
saveFile(data, filename) {
const aImg = document.createElement('a')
aImg.href = data
aImg.download = filename
document.body.appendChild(aImg)
aImg.click()
document.body.removeChild(aImg)
}