方法一 html2canvas
<template>
<view>
<view id="container" class="content">
<view ref="imageDom" class="card">
截图内容
</view>
</view>
<view class="buttonArea">
<view class="buttonItem" @click="canvasToImage.generateImage_Share">
<image src="../../static/logo_button.png" class="buttonImg"></image>
<view class="buttonTxt">分享给朋友</view>
</view>
<view class="buttonItem" @click="canvasToImage.generateImage">
<image src="../../static/save_button.png" class="buttonImg"></image>
<view class="buttonTxt">保存到相册</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
logo: logo(),
topBackground: topBackground(),
QrCode: QrCode(),
data: {
type: '',
titleTime: '',
Slogan: []
},
info: {},
name: uni.getStorageSync('nickname'),
avatar: uni.getStorageSync('avatar')
}
},
mounted() {},
methods: {
// 保存图片
getSaveImg(data) {
uni.showLoading({
mask: true
})
let base64data = data.base64data;
// console.log("base64data", base64data)
// return
let bitmap = new plus.nativeObj.Bitmap("test");
bitmap.loadBase64Data(base64data, function() {
console.log("加载Base64图片数据成功");
let time = Date.now()
let url = '_downloads/yflPic' + time + '.png';
uni.hideLoading()
bitmap.save(url, {}, function(i) {
console.log('保存图片成功：' + JSON.stringify(i));
// 保存图片到相册
uni.saveImageToPhotosAlbum({
filePath: url,
success: function() {
uni.showToast({
title: '图片保存成功',
icon: 'none'
})
// 图片保存成功后，将临时保存的图片删除
plus.io.resolveLocalFileSystemURL(
url,
function(entry) {
entry.getMetadata(function(metadata) {
// console.log("fileCount=" + metadata.fileCount);
entry
.remove(); //删除单个文件 _downloads/改文件名
});
},
function(error) {
// uni.showToast({ title: "下载文件" });
console.log("error" + error);
}
);
bitmap.clear()
}
});
bitmap.clear();
}, function(e) {
onsole.log('保存图片失败：' + JSON.stringify(e));
bitmap.clear();
});
}, function() {
console.log('加载Base64图片数据失败：' + JSON.stringify(e));
bitmap.clear();
});
},
// 分享图片
getSaveImg_Share(data) {
uni.showLoading({
mask: true
})
let base64data = data.base64data;
let bitmap = new plus.nativeObj.Bitmap("test");
bitmap.loadBase64Data(base64data, function() {
console.log("加载Base64图片数据成功");
let time = Date.now()
let url = '_downloads/yflPic' + time + '.png';
uni.hideLoading()
bitmap.save(url, {}, function(i) {
console.log('保存图片成功：' + JSON.stringify(i));
// 转发图片到微信
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 2,
imageUrl: url,
success: function(res) {
console.log("success:" + JSON
.stringify(res));
bitmap.clear();
},
fail: function(err) {
console.log("fail:" + JSON.stringify(
err));
}
});
}, function(e) {
onsole.log('保存图片失败：' + JSON.stringify(e));
bitmap.clear();
});
}, function() {
console.log('加载Base64图片数据失败：' + JSON.stringify(e));
bitmap.clear();
});
},
}
}
</script>
<script module="canvasToImage" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
data() {
return {}
},
methods: {
// 获取设备的Dpr值
getDpr() {
if (window.devicePixelRatio && window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
return 1;
},
/**
* 将传入值转为整数
* @param value
* @returns {number}
*/
parseValue(value) {
return parseInt(value, 10);
},
// 截图后保存到本地
generateImage(event, ownerInstance) {
// 获取想要转换的dom节点
var dom = document.getElementById('container');
html2canvas(dom, {
// allowTaint: false,
width: dom.clientWidth,
height: dom.clientHeight,
scrollY: 0,
scrollX: 0,
useCORS: true
}).then(function(canv) {
// 将canvas转换成图片渲染到页面上
let url = canv.toDataURL('image/jpg'); // base64数据
ownerInstance.callMethod('getSaveImg', {
base64data: url
})
});
},
// 截图后分享给好友
generateImage_Share(event, ownerInstance) {
// 获取想要转换的dom节点
var dom = document.getElementById('container');
html2canvas(dom, {
// allowTaint: false,
width: window.clientWidth,
height: window.clientHeight,
useCORS: true,
dpi: 350
}).then(function(canv) {
// 将canvas转换成图片渲染到页面上
let url = canv.toDataURL('image/jpg'); // base64数据
ownerInstance.callMethod('getSaveImg_Share', {
base64data: url,
})
});
},
}
}
</script>
<style lang="scss" scoped>
.content {
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: center;
}
.card {
width: 100%;
background: #3F65F4;
// padding: 16px;
.topTitle {
background: url('data:image/png;base64,iVBORw0K...GgoK5CYII=') no-repeat;//这里想要图片能够截取清晰则必须使用base64
background-size: 100% 100%;
width: 100%;
height: 151px;
padding: 16px;
.title {
font-weight: 600;
font-size: 36px;
color: #F5F5F7;
}
.time {
margin-top: 15px;
font-weight: 500;
font-size: 12px;
color: #fff;
}
}
}
</style>方法二 播放视频时截图文章来源：https://www.toymoban.com/news/detail-540032.html
<template>
<z-paging-swiper>
<view slot="top" style="height: 40px;">
<u-tabs-swiper ref="uTabs" :list="tabList" active-color="#5148ff" :current="current" @change="tabsChange"
:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
</view>
<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
<swiper-item class="swiper-item">
<view>
<video id="container" class="videoBox" :src="playUrl" :controls="true"
:enable-progress-gesture="false" :title="videoName+videoCode" :is-live="true">
</video>
</view>
<view class="ctrlBox">
<view class="remoteBox">
<zhangyubao-remote @remote="remote"></zhangyubao-remote>
</view>
</view>
<view>
<button @click="doshot"> 抓拍</button>
</view>
</swiper-item>
<swiper-item class="swiper-item">
2
</swiper-item>
<swiper-item class="swiper-item">
3
</swiper-item>
</swiper>
</z-paging-swiper>
</template>
<script>
import {
throttle,
formatDate
} from '@/common/util.js'
export default {
data() {
return {
videoCode: '',
videoId: '',
videoNo: null,
videoName: '',
playUrl: '',
current: 0, // tabs组件的current值，表示当前活动的tab选项
swiperCurrent: 0,
// 回放时间
datetimerange: [],
// 抓拍时间
datetimerangePic: [],
dataList: [],
videoContext: ''
}
},
onLoad(options) {
},
methods: {
// tabs通知swiper切换
tabsChange(index) {
this.swiperCurrent = index
},
// swiper-item左右移动，通知tabs的滑块跟随移动
transition(e) {
let dx = e.detail.dx
this.$refs.uTabs.setDx(dx)
},
// swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current
this.$refs.uTabs.setFinishCurrent(current)
this.swiperCurrent = current
this.current = current
console.log("tab滑动", this.current);
},
datetimePlay(e) {
console.log("回放时间", e);
},
datetimePic(e) {
console.log("抓拍时间", e);
},
doshot() {
this.videoContext = uni.createVideoContext('container'); //创建视频实例指向video
this.videoContext.pause(); //先对视频进行暂停，防止截图黑屏
this.$nextTick(() => {
this.getCapture()
})
},
getCapture() {
let that = this
let pages = getCurrentPages();
let page = pages[pages.length - 1];
let ws = page.$getAppWebview()
var bitmap = new plus.nativeObj.Bitmap('test');
// 将webview内容绘制到Bitmap对象中
ws.draw(bitmap, () => {
// 将原生Bitmap转换成Base64字符串
let base64data = bitmap.toBase64Data()
bitmap.loadBase64Data(base64data, function() {
// console.log("加载Base64图片数据成功");
let time = formatDate(new Date(), 'yyyyMMddHHmmss')
let url = '_downloads/four-faith_' + time + '.jpg';
uni.hideLoading()
bitmap.save(url, {}, function(fileinfo) {
// console.log('保存图片成功：' + fileinfo);
// 保存图片
let params = {
base64: base64data.split(',')[1],
captureTime: formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss'),
deviceNo: that.videoCode,
fileName: "app_" + that.videoCode + '_' + that.videoNo + '_' +
time +
'.jpg',
fileSize: fileinfo.size,
videoNo: 1
}
uni.showToast({
title: '抓拍成功',
icon: 'none',
})
bitmap.clear();
}, function(e) {
onsole.log('保存图片失败：' + JSON.stringify(e));
bitmap.clear();
});
}, function() {
console.log('加载Base64图片数据失败：' + JSON.stringify(e));
bitmap.clear();
});
this.videoContext = uni.createVideoContext('container'); //创建视频实例指向video
this.videoContext.play();
}, (e) => {
console.log('截屏绘制图片失败：', e);
uni.showToast({
title: '抓拍失败',
icon: 'none',
})
}, {
check: true, // 设置为检测白屏
// 设置截屏区域
clip: {
top: uni.getSystemInfoSync().statusBarHeight + 90,
left: '0px',
height: '400px',
width: '100%'
}
});
},
}
}
</script>
<style>
page {
background-color: #f6f5f8;
}
.swiper {
height: 100%;
}
.videoBox {
width: 100%;
height: 300px;
/* background-color: #fff000; */
}
.ctrlBox {
margin-top: 30rpx;
}
.remoteBox {
display: flex;
justify-content: center;
}
.selectTime {
padding: 10rpx 20rpx;
}
</style>方法三 小程序原生使用的截图文章来源地址https://www.toymoban.com/news/detail-540032.html
到了这里，关于关于使用uniapp截图APP内容的两种办法，及一种小程序原生的截图办法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
