vue怎么实现截图（vue实现截图功能）
vue怎么实现截图（vue实现截图功能）<vue-qr<div class="body-box">import html2canvas from 'html2canvas'3、template：<div id='nodeBox' class="content-body" slot="content">
我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
1、安装
npm install html2canvas --save
2、引入
import html2canvas from 'html2canvas'
3、template：
<div id='nodeBox' class="content-body" slot="content">
<div class="body-box">
<vue-qr
:text="downloadData.url"
:margin="0"
colorDark="#000"
colorLight="#fff"
:logosrc="https://img.aigexing.comdownloadData.icon"
:logoScale="0.3"
:size="200"></vue-qr>
</div>
</div>
4、scripts：
// 截取图片
setImage () {
let that = this;
var canvas2 = document.createElement("canvas");
// let _canvas = document.getElementById('child');
let _canvas = document.getElementById('nodeBox');
var w = parseInt(window.getComputedStyle(_canvas).width);
var h = parseInt(window.getComputedStyle(_canvas).height);
//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
canvas2.width = w * 4;
canvas2.height = h * 4;
canvas2.style.width = w "px";
canvas2.style.height = h "px";
//可以按照自己的需求，对context的参数修改 translate指的是偏移量
var context = canvas2.getContext("2d");
context.scale(2 2);
html2canvas(document.getElementById('nodeBox') {
canvas: canvas2
}).then(function (canvas) {
var blob = that.getBlob(canvas);
var oMyForm = new FormData();
var fileName = "mobile" '.jpg'
oMyForm.append("file" blob fileName);
// oMyForm.append("fileName" fileName);
oMyForm.append("fileType" 'image');
oMyForm.append("user_id" that)
});
}
getBlob (canvas) { //获取blob对象
var data = canvas.toDataURL("image/jpeg" 1);
this.dataurl=data
console.log(this.dataurl)
data = data.split(' ')[1];
data = window.atob(data);
var ia = new Uint8Array(data.length);
for (var i = 0; i < data.length; i ) {
ia[i] = data.charCodeAt(i);
}
return new Blob([ia] {
type: "image/jpeg"
});
}
5、应用：
<img id='downImg' :src="https://img.aigexing.comdataurl" alt="">
