h5页面生成分享海报(保存图片、分享)

一、案例简介

最近遇见了h5分享页面,就是自己写的整页内容(内含二维码)可以长按保存到手机里,然后发给别人。
其实就是h5生成分享海报,以前的时候写过这个东西,但是太久了都忘了,然后上网去搜索,答案也是五花八门,也很不简洁,自己理解起来也很费劲,好不容易把代码搬到自己这边,运行不起来是一方面,另一方面是改成自己的比较费劲…所以我写了一个很简洁的小案例,也算是给自己留一份笔记。在第三模块会将完整代码整份贴出。
移动端(手机端)演示:
请添加图片描述
电脑模拟手机:
在这里插入图片描述

二、案例详解

1.说明:

页面是普通的html代码,该怎么写就怎么写,让他变成图片这块是借助 html2canvas 这个第三方 js 库实现的。
那这个html2canvas 东西是啥呢?下面进入网址自行查看👇:
他的中文网址:https://allenchinese.github.io/html2canvas-docs-zh-cn/
英文网址:http://html2canvas.hertzen.com/
工作原理:读取 DOM 以及应用于元素的不同样式,将当前页面渲染为 canvas 图像。

不知道的dom的需要去学习JavaScript
Canvas API 提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

2.安装和使用

(1)使用npm安装(目前不推荐)
npm install --save html2canvas
(2)直接引入html2canvas.js(推荐:上手快)

下载地址:http://html2canvas.hertzen.com/
在这里插入图片描述
之后在html页面引入使用即可

<script type="text/javascript" src="./js/html2canvas.js"></script>

3.逐步演示

  • 标题
  • 补充解释
  • html结构图
  • 效果演示图
第一步
1.标题:初始样式
2. 补充说明:

(1)默认样式
(2)引入html2canvas.js文件
(3)提前为之后要生成的图片提供容器

3.html结构图

在这里插入图片描述

4.效果演示图

在这里插入图片描述

第二步
1.标题:将html元素转化为canvas
  • 点击开始转化按钮后,会将整个页面生成出一份 canvas,并将 canvas 添加到页面尾部。(你不添加,是看不见的)
  • 对于生成出来的画布,可以右键另存为图片。
2.补充说明:

(1)图片上附有

3.html结构图

在这里插入图片描述

4.效果演示图

请添加图片描述

第三步
1.标题:将 Canvas 转换成 base64编码格式,然后再使用。
2.补充说明:

想必大家也从下方图看到了,图片有放大现象。这个和“二倍图”有关。解决这个失真的问题其实在官方文档中有指出。
格式转化的用法:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

3.html结构图

在这里插入图片描述

4.效果演示图

在这里插入图片描述

第四步
1.标题:其他配置
2.补充说明:

以上是基础版,下方开始plus版,官方文档中提供了选项的配置。
中文网址:https://allenchinese.github.io/html2canvas-docs-zh-cn/

3.html结构图

在这里插入图片描述

4.效果演示图

在这里插入图片描述

第五步
1.标题:一进页面就是已经生成好的图片,用户直接右键保存即可。手机端则为长按保存。且页面中出现一个而非两个。这样的话也就是说img生成之后,将原有的html元素隐藏掉,页面上只留下img即可。
2.补充说明:无
3.html结构图

在这里插入图片描述

4.效果演示图

在这里插入图片描述

三、案例完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>h5保存页面为图片</title>
    <!-- 移动端设置 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <!-- 引入html2canvas.js库 -->
    <script type="text/javascript<
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值