H5plus网页截屏后微信分享(一大波骚操作)

项目用h5+,收益挺大的,一套代码俩移动端运行,多个前端项目全部支持热更新. 小的需求改了当天发版,重大bug出现几小时内快速解决. 敏捷高效压力小,友方的项目组要馋哭了.

麻烦的一点就是原生交互得看api, 出了问题不好查资料. 尽管是国产框架,对阅读能力是大考验.

一开始前端开发说没法做. 没办法.我只能自己去查.截屏的话h5+api有调用系统的,或者是用html2canvas这个js工具

前端开发用了html2canvas, 反映ios9以下的有问题, 我让他自己解决, 后来不知道怎么弄好了

微信分享图片的时候, 他问我图片怎么转换成url, 我当时挺忙的也没细问, 说那不就是上传吗, 就把上传图片接口给他了.

后来开发了一周完成了要上线了, 好像还挺顺利的, 突然想到前端说要图片转url, 有一种不祥的预感涌上心头

果然,前端截图完了后不管是要保存还是分享, 都往图片服务器上面传

我勒个去,图片服务器就算再能存, 这种重复的图片完全没必要啊.

问了下友方项目的开发,说是可以直传图片,用的微信sdk,但只能原生能用

然而我们用的微信的jssdk, 不能分享图片格式的,只能传url,必须上传(他说的是"调图片转url的接口")才行...这是我们前端说的

我一听,不可能,h5+是有微信模块的,

然后我拉了前端项目,让前端开发打了个开发包, 看了h5+api, 花了不到两个小时, 搞定了.

确实有点麻烦.h5+里面要分享图片先得转换成对象,down到本地,才能分享. 具体如下

把html2canvas截屏转成base64:

  let base64 = canvas.toDataURL("image/png");

base64转Bitmap对象:

var bitmap = new plus.nativeObj.Bitmap();
bitmap.loadBase64Data(base64, 转换成功,转换失败);

转换成功的回调里面保存到本地:

bitmap.save("img/screenshoot.png", {
  overwrite: true
},保存成功,保存失败);

保存成功的回调里面分享到微信:

var msg = {
  type: "image",
  pictures: "img/screenshoot.png",
  title: "分享的标题"
};

s.send(
  msg,分享成功,分享失败);