1、安装所需插件
npm install --save html2canvas // 页面转图片
2、新建页面img.vue
<template>
<div class="reportWrap">
<div id="report">
<div
class="content"
v-for="item in strList"
:key="item.label"
>
<p class="hide">{{ item.str }}</p>
</div>
</div>
<div class="box">
<a
class="down"
href
download="图片名字"
@click="htmlTocanvas1"
>保存图片</a>
</div>
<!-- <div
class="imgBox"
>
<div class="img">
<img
:src="fileId"
alt=""
>
</div>
</div> -->
</div>
</template>
<script>
import html2canvas from 'html2canvas';
export default {
data() {
return {
fileId: '',
imgurl: null,
imgBox: false,
strList: [
{ str: '要永远坚信这一点：一切都会变的，无论受多大创伤心情多么沉重，一贫如洗也好，都要坚持住。太阳落了还会升起，不幸的日子总会有尽头，过去是这样，将来也是这样。早安!', label: '1' },
{ str: '这是他的似水流年，不是我的。岁月如流，就如月在当空，照着我们每一个人，但是每个人的生活都不一样。', label: '2' },
{ str: '流水是白云的影子，月亮是太阳的影子，黑夜是白天的影子，痛苦是爱的影子。不求你做我的影子，甘愿我做你的影子。', label: '3' },
{ str: '花开一季，人活一世，只有时光安然无恙。那些转正确的弯，那些流下的泪水，那些滴下的汗水，不论好坏，终究成全了现在的自己。', label: '4' },
{ str: '人生没有假设，当下即是全部。人生的幸与不幸，关键看你面向哪里。幸福如阳光，不幸是阴影，有阳光就必然有阴影。人生一边是永无止境的追求，一边是平淡如水的流年。不是每一次追求都能成功，不是每一次付出都有收获。', label: '5' },
{ str: '在沧海桑田，我们就是那起舞的蝴蝶，无论今天怎样，明天我还会在这里，路过我曾经去过的地方，探索我未实现的未来，哪怕是蝴蝶飞不过沧海。', label: '6' },
{ str: '从容来去，坦然今生。无论生命给了我们什么，是雨露的滋润，还是阳光的照射，是狂风的吹拂，还是暴雨的敲打，我们都从容地接受，欣然地释放着生命的繁丽。如果遇到的是伤痛，我们就要学会坚忍，并因此练就释怀生命起落的本能。如果遇到的是快乐，我们就幸福地绽开笑容，并把快乐传播。如果遇到的是黑夜，我们就和星星、月亮一起迎接每一个黎明的到来；如果遇到的是白昼，我们就尽情地去欣赏鲜花的绽放、鸟儿的歌唱、蝶儿的轻舞，去拥抱这个美丽而充满生机的世界。', label: '7' }
]
};
},
created() {
},
mounted() {
// 将网页生成图片
this.htmlTocanvas1();
},
methods: {
// 获取截图
getBase64(fileId) {
this.fileId = fileId;
console.log('this.fileId', this.fileId);
},
// 页面生成图片(基础版)
htmlTocanvas() {
const that = this;
html2canvas(document.getElementById('report')).then(
async function(canvas) {
// 第一种方法,生成base64
// let str = canvas.toDataURL("image/png").split(",")[1];
that.getBase64(canvas.toDataURL('image/png'));
// 第二种方法,直接下载
// canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
// document
// .querySelector(".down")
// .setAttribute("href", canvas.toDataURL());
// 第三种方法,生成的图片的url
// var imgurl = canvas
// .toDataURL("image/png")
// .replace("image/png", "image/octet-stream"); // 获取生成的图片的url
// window.location.href = imgurl; // 下载图片
}
);
},
// 页面生成图片(进阶版)
htmlTocanvas1() {
// 解决生成的网页图片不清晰------预防,暂未出现
const that = this;
// 创建一个新的canvas
var canvas2 = document.createElement('canvas');
// let _canvas = document.querySelector('div');
const _canvas = document.getElementById('report');
var w = parseInt(window.getComputedStyle(_canvas).width);
var h = parseInt(window.getComputedStyle(_canvas).height);
// 将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
canvas2.width = w * 3;
canvas2.height = h * 3;
canvas2.style.width = w + 'px';
canvas2.style.height = h + 'px';
// 可以按照自己的需求，对context的参数修改,translate指的是偏移量
// var context = canvas.getContext("2d");
// context.translate(0,0);
// var context = canvas2.getContext('2d');
html2canvas(document.getElementById('report'), {
canvas: canvas2
}).then(async function(canvas) {
// 第一种方法,生成base64
// let str = canvas.toDataURL("image/png").split(",")[1];
that.getBase64(canvas.toDataURL('image/png'));
// 第二种方法,直接下载
// canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
document
.querySelector('.down')
.setAttribute('href', canvas.toDataURL());
// 第三种方法,生成的图片的url
// var imgurl = canvas
// .toDataURL('image/png')
// .replace('image/png', 'image/octet-stream'); // 获取生成的图片的url
// console.log('imgurl', imgurl);
// window.location.href = imgurl; // 下载图片
});
}
}
};
</script>
<style lang="scss" scoped>
.ReservedSucceed {
background-color: white;
.hide {
text-indent: 1em;
}
.imgBox {
position: fixed;
top: 15%;
left: 25%;
width: 50%;
background-color: rgb(232, 236, 232);
z-index: 2;
border-radius: 20px;
padding: 5px;
.img {
padding: 10px;
img {
width: 100%;
}
}
.box {
text-align: center;
margin: 10px 0;
}
}
}
</style>
posted on
