效果圖
哈哈哈哈哈
一、安裝 html2canvas.js
npm install --save html2canvas@1.0.0-rc.4
二奢驯、完整代碼
<template>
<div class="individuation">
<!-- 把需要生成圖片的元素放在一個元素容器里,設置ref -->
<div ref="imageTofile">
<!-- 這里放需要截圖的元素,自定義組件元素也可以 -->
哈哈哈哈
</div>
<!-- 如果需要展示截取的圖片,給一個img標簽 -->
<img :src="htmlUrl" />
</div>
</template>
<script>
import html2canvas from "html2canvas";
export default {
data() {
return {
htmlUrl: "",
};
},
mounted() {
this.toImage();
},
methods: {
// 頁面元素轉圖片
toImage() {
let option = {
scale: 3,
useCORS: true,
backgroundColor: null,
}; // 第一個參數(shù)是需要生成截圖的元素,第二個是自己需要配置的參數(shù)
html2canvas(this.$refs.imageTofile, option).then((canvas) => {
let url = canvas.toDataURL("image/png");
console.log(url);
this.htmlUrl = url; // 把生成的base64位圖片上傳到服務器,生成在線圖片地址 //this.sendUrl();
});
},
},
};
</script>
