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

秋叶原的琴音

已于 2023-09-13 15:49:50 修改

阅读量1.5k

点赞数

分类专栏： uniapp 文章标签： uni-app 小程序

于 2023-09-07 18:28:33 首次发布

本文链接：https://blog.csdn.net/qq_27161847/article/details/132743667

版权

uniapp 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

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

在uniapp项目中新建主页和webview页面
![在这里插入图片描述](https://img-blog.csdnimg.cn/166a54ad0f6e4d79b9962ab578349e3b.pn

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>