手机QQ
截图分享
效果图
canvas webgl渲染下截图：
主要思路：
- 把主界面通过canvas转base64的方式截图
- 使用二维码生成库把分享的URL生成二维码
- 将1的截图+二维码+文字合到另一个canvas里面，再截图，获得base64
- 调客户端接口分享
canvas转base64
canvas2D截图，在需要的位置调用toDataUrl，具体代码如下：
//canvas2D截图,第一个参数是图片格式，第二个参数为压缩比，0.96是压缩性价比最高的一个值
document.getElementById('canvas').toDataURL('image/jpg', 0.96);
webgl截图
根据你获取webgl上下文的时候，传的参数preserveDrawingBuffer，表示绘图后要不要保留缓冲区
1.如果为true,截图方式同canvas2D。
2.为false或者没有设置，与canvas2D方式略有不同，需要渲染之后立即截图，不然会是透明图
有以下两种方式推荐
//初始化时默认不截图
var takingPhoto = false;
var animation = function(){
/*
wegl绘图相关代码
*/
if(takingPhoto === true){
window.onTakingEnd && window.onTakingEnd(
document.getElementById('canvas').toDataURL('image/jpg', 0.96)
);
}
}
requestAnimationFrame(animation);
//如果需要截图，设置参数为true;
takingPhoto = true;
window.onTakingEnd = function(base64){
//只截一次图
takingPhoto = false;
window.open(base64);
}
资源跨域
参考文档 WebGL Resources
var gl = ...;
var image = new Image();
// The onload handler should be set to a function which uploads the HTMLImageElement
// using texImage2D or texSubImage2D.
image.onload = ...;
image.crossOrigin = "anonymous";
image.src = "http://other-domain.com/image.jpg";
合并二维码
下载二维码生成库来生成二维码
分享图片
使用jsapi可分享到QQ/空间/微信/朋友圈渠道 mqq.Qzone.sharePicture
window.mqq.invoke('Qzone','sharePicture',{
type: '0',
base64: 'data:image/jpg;base64,/9j/4AAQ...'
}, function(retCode){
// 0 -- 用户点击发送，完成整个分享流程
// -1 -- 用户点击取消，中断分享流程(android)
// -2 -- 用户点击取消，中断分享流程(ios)
// xx -- 分享微信失败错误码(ios) e.g. 404-未找到微信，其他透传微信错误码
});