这个html5项目的页面有很多,以下二维码的页面是单拿出来的测试页面;
测试时发现,仅仅是有canvas图片合成功能的,在安卓机下用微信打开链接,但无法分享有图片合成的当前页面到朋友圈或者分享给微信朋友;
qq打开链接,安卓机和ios的都可以分享;
而且我浏览器模拟手机预览:iphone4,canvas图片没有显示全,没有测试机,所以这个暂时不知道iphone4下是什么样子,不过这个缺陷通过API应该能解决;
测试二维码:(安卓机微信扫描,右上角无法分享)
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 1080) deviceWidth = 1080;
document.documentElement.style.fontSize = deviceWidth / 10.8 + 'px';
var page_b_height = $(window).height();
$("#setBgHeightB").css("height",page_b_height);
//动态获取当前宣誓数据量
//自定义
var countNum = 100;
drawQrcode(countNum);
//画布功能
function drawQrcode(countNum){
var nWidth = document.body.clientWidth,
nHeight = document.body.clientHeight,
_canvasWidth = document.body.clientWidth*2,
_canvasHeight = document.body.clientHeight*2;
//开始画图,获取上下文
var _canvas = document.getElementById("canvas_box");
_canvas.width = _canvasWidth;
_canvas.height = _canvasHeight/0.985;
//自定义
var _centerWidth = _canvasWidth/2;
var posHeight = $("#canvas_box").height();
//
var _context = _canvas.getContext('2d');
//
var _imageBj = new Image();//头像
//如果有跨域问题,请给img对象添加如下属性
_imageBj.crossOrigin="anonymous";
_imageBj.src = 'http://n.sinaimg.cn/news/xfxs/images/constitutionalOath_1208.png';
_imageBj.onload = function(){
_context.save(); // 保存当前_context的状态
_context.drawImage(_imageBj, 0, 0,_centerWidth*1.99,posHeight*2.2);
_context.stroke();//
_context.closePath();
//设置边框
_context.beginPath();
_context.moveTo(60,150);
_context.lineTo(_centerWidth,150);
_context.lineTo(_centerWidth,_centerWidth);
_context.lineTo(60,_centerWidth);
_context.lineTo(60,150);
_context.lineWidth = 3;
_context.strokeStyle = "rgba(255,255,255,.4)";
_context.stroke();
//
_context.beginPath();
_context.textAlign = "left";
//设置字体
_context.font = '30px bold';
_context.lineWidth = 1.0;
_context.fillStyle = 'rgb(255,255,255)';
_context.fillText("我是第", 99, 102*2);
_context.font = '46px bold';
_context.lineWidth = 1.0;
_context.fillStyle = 'rgb(255,255,255)';
_context.fillText(countNum + '名', 99, 130*2);
_context.font = '30px bold';
_context.lineWidth = 1.0;
_context.fillStyle = 'rgb(255,255,255)';
_context.fillText("宣誓的人", 99, 152*2);
//canvas 画完图 一定要生成图片流,作为img 的src属性值,同时隐藏canvas,只展示img就ok了,在手机上试试长按保存功能吧
var _imgSrc = _canvas.toDataURL("image/png",1);
_canvas.style.display="none";
var imgShow = document.getElementById('imgShow');
imgShow.setAttribute('src', _imgSrc);
}
}