uniapp使用webview将页面转换成图片支持h5、app、小程序-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp使用webview将页面转换成图片支持h5、app、小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uniapp使用webview将页面转换成图片支持h5、app、小程序

在uniapp项目中新建主页和webview页面
uniapp页面生成图片,uniapp,uni-app,小程序

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.net/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>