zoukankan      html  css  js  c++  java
  • 使用html2canvas在手机端独立实现h5页面转图片

    需求

    方便用户把每日消息的海报图片分享到微信朋友圈进行消息扩散

    实现方案

    使用html2canvas 插件,html2canvas 1.0.0-alpha.11 ,github地址:https://github.com/niklasvh/html2canvas  官网:https://html2canvas.hertzen.com/

    具体实现:二维码里是h5页面链接,当h5页面加载完成后,第一步:调用html2canvas方法返回canvas对象,第二步:使用canvas.toDataURL()方法生成<img>标签可用的base64图片数据,在页面最后插入<img>,然后隐藏页面元素;

    注意点:

    一、使用html2canvas 插件,canvas需要服务器环境,比如使用HbuilderX或者VSCode的live server打开html文件即可;

    二、html2canvas插件并不支持所有的css属性,避免使用不支持的属性(比如:text-overflow: ellipsis;),具体看这里 https://html2canvas.hertzen.com/features

    三、html2canvas插件期望使用的图片跟当前域名同源 - 如果是跨域的图片资源,需要设置 {useCORS:true};并且给跨域<img>的src添加一个固定的字符串(如:<img src="https://***/***.jpg?avoid_browser_cache">),读取重新请求的图片而不是浏览器缓存的图片;

    四、如果使用伪元素:before,同时使用:nth-child(),伪元素会变成第一个child的问题,使用:nth-of-type()就可以了;

    五、在微信中,有时候应用background-size属性,会导致canvas.toDataURL()方法失效,即canvas转不成图片;

    实现代码:

  • 相关阅读:
    设计模式读书笔记
    effective_c++(第三版)读书笔记
    CS-Notes 操作系统读书笔记
    数据库笔记
    后台开发核心技术与应用读书笔记
    python3.7安装numpy pandas失败的处理方案
    线段树模板
    KMP算法
    离散实验——欧拉图的判定和应用
    堆排序算法及其实现
  • 原文地址:https://www.cnblogs.com/heroljy/p/9831675.html
Copyright © 2011-2022 走看看