项目里面有个需求是用户评论完成生成画报，长按可以进行保存，那来写个demo吧，先来看看效果图叭：
- 首先是简单的页面结构
<!-- 画报： -->
<div class="imgBox" ref="toSaveImage">
<span>画报</span>
<div class="imgDiv">
<img :src="getImage('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1537697502,2259796585&fm=26&gp=0.jpg', '#imgbox')" id="imgbox" alt="停一下" />
</div>
<div class="qrDiv">
<vue-qr :logoSrc="imageUrl" :text="urlText" :size="100" :margin="0"></vue-qr>
</div>
</div>
- 为什么上面路径还要这样写，是为了对于一些没有做跨域的图片转化成base64，具体如下：
getImage(imgUrl, imgId) { //方式二：
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open("get", imgUrl, true);
xhr.responseType = "blob"; // 至关重要
let that = this;
xhr.onload = function () {
if (this.status == 200) {
var blob = this.response; //得到一个blob对象
let oFileReader = new FileReader(); // 至关重要
oFileReader.onloadend = function (e) {
let base64 = e.target.result;
that.canDownloadFlag = true;
};
oFileReader.readAsDataURL(blob);
let src = window.URL.createObjectURL(blob);
document.querySelector(imgId).src = src;
//====为了在页面显示图片，可以删除====
// var img = document.createElement("img");
// img.onload = function (e) {
// window.URL.revokeObjectURL(img.src); // 清除释放
// };
// let src01 = window.URL.createObjectURL(blob);
// img.src = src01
// document.getElementById("container1").appendChild(img);
//====为了在页面显示图片，可以删除====
}
}
xhr.send();
},
- 看看至关重要的一步。将页面转化为图片：
// 保存到本地：
downloadLocal() {
if (!this.canDownloadFlag) {
return this.Toast("正在加载图片，请稍后");
}
let width = this.$refs.toSaveImage.offsetWidth;
let height = this.$refs.toSaveImage.offsetHeight;
let scale = 1;
html2canvas(this.$refs.toSaveImage, {
width: width,
height: height,
scale: scale,
useCORS: true, // 【重要】开启跨域配置
allowTaint: true, //允许跨域图片
logging: false
}).then(canvas => {
let imgUrl = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
// 方式一：pc端可以下载，但是真机不能下载%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// var eleLink = document.createElement("a");
// eleLink.href = imgUrl; // 转换后的图片地址
// eleLink.download = "img.png";
// document.body.appendChild(eleLink);
// eleLink.click();
// document.body.removeChild(eleLink);
// console.log(imgUrl);
// 方式二：和上面的方式一样，真机不能正常下载%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// this.downloadFile(imgUrl, '1.png');
// 方式三：引导下载，先生成图片，然后长按下载%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
this.show = true;
this.imgSrc = imgUrl;
}).catch(error => {
console.log(error);
});
},
- 好了，到这里就结束了
