uniapp使用webview将页面转换成图片支持h5、app、小程序
在uniapp项目中新建主页和webview页面
index.vue代码
<template>
<view>
<!-- 微信小程序要设置src为网络路径 -->
<web-view src="/hybrid/html/webview.html"></web-view>
</view>
</template>
webview代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>网络网页</title>
<style type="text/css">
.btn {
display: block;
margin: 20px auto;
padding: 5px;
background-color: #007aff;
border: 0;
color: #ffffff;
height: 40px;
width: 200px;
}
</style>
</head>
<body>
<div id="app">
<div id="btn-list" style="display: flex;flex-dis;justify-content: center;flex-direction:column">
<input style="padding:10px;height: 25px;" placeholder="测试" />
<button class="btn" type="button" data-action="navigateTo">按钮</button>
</div>
</div>
<script src="https://cdn.bootcdn.***/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
html2canvas(document.querySelector("#btn-list")).then(canvas => {
console.log(canvas)
const dataUrl = canvas.toDataURL()
console.log(dataUrl)
document.body.appendChild(canvas)
});
</script>
</body>
</html>
实现效果
