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

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

在uniapp项目中新建主页和webview页面
uniapp使用webview将页面转换成图片支持h5、app、小程序_第1张图片

index.vue代码

<template>
	<view>
		
		<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)
								  document.body.appendChild(canvas)
		});
    script>
  body>
html>


实现效果
uniapp使用webview将页面转换成图片支持h5、app、小程序_第2张图片
uniapp使用webview将页面转换成图片支持h5、app、小程序_第3张图片
uniapp使用webview将页面转换成图片支持h5、app、小程序_第4张图片

你可能感兴趣的:(uniapp,uni-app,小程序)