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

  • 相关阅读:
    配置webstorm使用supervisor时出现 /usr/bin/env: node: 没有那个文件或目录 解决方法
    解决Ubuntu不能挂载ntfs格式硬盘
    git远程操作
    git重写历史记录
    git撤销命令
    git查看历史命令
    git分支管理和stash
    git的忽略文件和删除文件操作
    homebrew学习(四)之取消homebrew自动更新
    homebrew学习(三)之homebrew命令
  • 原文地址:https://www.cnblogs.com/web-fusheng/p/10592959.html
Copyright © 2011-2022 走看看