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

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

index.vue代码

<template>
	<view>
		
		<web-view src="/hybrid/html/webview.html">web-view>
	view>
template>
1
2
3
4
5
6

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>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

实现效果
在这里插入图片描述

相关阅读:
tg群组内容怎么更新到网页
web手势库Alloyfinger
轻量级RPC分布式网络通信框架设计——日志模块解析
【Python百日进阶-数据分析】Day119 - Plotly Figure参数: 散点图(一)
DolphinScheduler——介绍及架构设计
Springboot改成Https请求【实战】
express promise async await promisify
【微信小程序开发】小程序版的防抖节流应该怎么写
HCIP-路由01：路由基础
R语言参数自抽样法Bootstrap：估计MSE、经验功效、杰克刀Jackknife、非参数自抽样法可视化

原文地址：https://blog.csdn.net/qq_27161847/article/details/132743667