我自己是一名从事了多年开发的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=”downloadData.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=”dataurl” alt=””>
