zoukankan      html  css  js  c++  java
  • 移动端js模拟截屏生成图片并下载功能的实现方案

    一、根据PM需求如下:

    移动端wap 实现将二维码生成图片下载至用户手机相册保存

    二、根据现有思路:

    1、使用第三方工具html2canvas,将页面中指定范围的dom转换为canvas

    2、随后使用canvas的apitoDataUrl获得base64格式的图片数据

    3、此时试着直接用a标签下载

    <a href="base64Url" download="name.jpg"></a>
    

      

    三、经过尝试,发现在wap端无法完美实现,原因:

    1、H5现有的 download 属性,不同浏览器的支持有差别,chrome 和 firefox是支持比较好的

    2、前端js生成的时base64格式的图片数据,移动端无法直接下载,(pc端的chrome 和 firefox 貌似可以)

    四、修正思路:

    1、将base64转换成blob,再模拟一个表单对象,将blob放进去,使用post提交给后端

    2、图片传输至后端保存,并返回图片服务器地址

    3、拿到服务器地址后,再来尝试a标签下载:

    4、根据手机系统,经过实测:

     a、IOS系统UC上,直接打开了图片地址(如果图片地址与项目地址不同源,可能还会出现提示)

     b、Android系统UC上,可以直接下载

    5、优化IOS,放弃a标签的方案,变为添加一个弹出层,展示该图片,提示用户长按下载,至此比较完美的实现了该功能

    参考:https://juejin.im/post/5c415691e51d45518d46eb9c

  • 相关阅读:
    玩游戏(dfs)
    Find them, Catch them(并查集)
    Shredding Company(dfs)
    Sudoku(dfs)
    Network Saboteur(dfs)
    棋盘问题(dfs)
    Curling 2.0(dfs)
    A Knight's Journey(dfs)
    15. 3Sum
    12. Integer to Roman
  • 原文地址:https://www.cnblogs.com/web-fusheng/p/10592959.html
Copyright © 2011-2022 走看看