前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >移动端H5页面截图

移动端H5页面截图

作者头像
yangdongnan
发布2019-07-01 17:23:07
3.4K0
发布2019-07-01 17:23:07
举报
文章被收录于专栏:日常记录

两个工具: html2canvas 官方地址:https://github.com/niklasvh/html2canvas

优点: 1.使用人数多,资料更全

缺点: 1.感觉不怎么维护更新了

domtoimage 官方地址【github例子很全了】:https://github.com/tsayen/dom-to-image

优点: 1.有人维护 2.git活跃,作者发言 3.使用方便

缺点: 1.新控件,使用人数少,资料不全 2.IOS手机不能截图,污染了canvas.toDataURL会报错【目前还没解决】(参考链接:https://github.com/tsayen/dom-to-image/issues/40)

代码语言:javascript
复制
   报错信息如下:"SECURITY_ERR: DOM Exception 18: The operation is insecure"
   修改dom-to-image.js源码如下:
    //IOS兼容 
    function toPng(node, options) {
        return draw(node, options || {})
            .then(function(result) {
                try {
                    // 原来的
                    var image = result.canvas.toDataURL("image/png", 1.0);
                    return image;
 
                    // 改为svg更清楚
                    // console.log(result.svg.src);
                    // return result.svg.src;
                } catch (err) {
                    console.warn(err);
                    // alert(result.svg.src);
                    // console.log(result.svg.src);
                    return "error";
                }
            });
    }

最终方案选择: 参考了很多资料,最后决定IOS使用html2canvas ,Android使用domtoimage

代码语言:javascript
复制
代码:
  // 裁剪名片
  cropCard() {    
    let self = this;
    // 获取dom结构
    let card_target = this.refs.copyCardArea; 
    domtoimage.toPng(card_target).then(function(dataUrl) {
      //andriod 
      if (dataUrl != "error") {
        // alert("domtoimage");
        self.setState({
          imgUrl: dataUrl,
          isDownloadImg: true,
        })
      }
      // ios
      else {
        let b64;
        html2canvas(card_target, {
          useCORS: true
        }).then(function(canvas) {
          try {
            b64 = canvas.toDataURL("image/png");
          } catch (err) {
            console.log(err)
              // alert(err)
          }
          self.setState({
            imgUrl: b64,
            isDownloadImg: true,
          })
        }).catch(function onRejected(error) {});
      }
    });
  }

手机淘宝兼容: 手淘禁止了,用户使用截图,推荐使用官方JSBridge

WindVane链接:http://h5.alibaba-inc.com/api/WindVane-API.html

方法:WVScreen.capture

缺点: 1.只能截取整个屏幕,不能只获取名片信息 2.不知道是不是react的原因,直接使用,会有部分情况截取到灰色蒙版的效果,所以延迟300毫秒截图

代码语言:javascript
复制
引入:
    <script src="//g.alicdn.com/mtb/lib-windvane/2.1.8/windvane.js"></script>

代码:
      window.setTimeout(() => {
        this.taobaoCapture();
      }, 300);
  taobaoCapture() {
    let self = this;
    var params = {
      // 是否将截屏结果保存一份到相册中
      inAlbum: 'true'
    };
    window.WindVane.call('WVScreen', 'capture', params, function(e) {
      // alert('success: ' + JSON.stringify(e));
      // 截图成功提示话语
      self.setState({
        isTips: true,
        line1: tipWords.saveCardS.line1,
        line2: tipWords.saveCardS.line2,
      });
    }, function(e) {
      // alert('failure: ' + JSON.stringify(e));
      // 截图失败提示话语
      self.setState({
        isTips: true,
        line1: tipWords.saveCardF.line1,
        line2: tipWords.saveCardF.line2,
      });
    });
  }

写在最后: domtoimage 和 html2canvas截图PNG格式,都会损失部分图片精度,使图片变模糊。 如果不是在移动端的话,建议使用SVG格式,更为清晰。 两个插件个人更喜欢 domtoimage ~

DEMO: https://codepen.io/CandyQiu/pen/XzmGNL?editors=0010

转载:https://blog.csdn.net/candy_home/article/details/78424642

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年04月12日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • DEMO: https://codepen.io/CandyQiu/pen/XzmGNL?editors=0010
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档