canvas图片合成,安卓微信端页面无法分享

这个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);
            }
            
        } 
阅读 2.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题