<div ref="imageWrapper">
<p>要截屏的内容</p>
</div>
// import html2canvas from "html2canvas"; // 当前vue文件引入html2canvas
// components: {html2canvas}
// 点击保存图片
justDoIt() {
var that = this;
if (navigator.userAgent.indexOf("Html5Plus") >= 0) {
that.saveCodeBtnHide(1);
// 5+app环境
console.log("点击保存图片");
that.$nextTick(() => {
that.toImage();
});
}
},
// 网页截图
toImage() {
var that = this;
setTimeout(() => {
html2canvas(this.$refs.imageWrapper, {
backgroundColor: null,
useCORS: true, // 开启跨域配置
allowTaint: true, // 允许跨域图片
taintTest: true // 是否在渲染前测试图片
}).then(canvas => {
let dataURL = canvas.toDataURL("image/png");
console.log("网页截图");
// console.log(dataURL);
that.savePicture(dataURL);
});
}, 300);
},
// 保存图片到相册中
savePicture(imgurl) {
var that = this;
var b = new plus.nativeObj.Bitmap("bitblmap");
console.log("☆☆☆☆☆☆ 保存图片到相册中");
console.log(b);
b.loadBase64Data(
imgurl,
function() {
console.log("图片创建成功");
var fileName = "_doc/img1.png";
b.save(
fileName,
{ overwrite: true },
object => {
plus.gallery.save(
fileName,
() => {
console.log("保存图片到相册成功");
},
() => {
console.log("保存图片到相册失败");
}
);
},
() => {
console.log("保存失败");
}
);
},
function() {
console.log("图片创建失败");
}
);
}
4 个评论
要回复文章请先登录或注册
传播星球
百倍
名图客
4***@qq.com