h5开发中,利用微信或者QQ登陆以后获取用户头像在canvas画布显示问题

在实际开发上先的h5页面产品中,总会遇到各种坑,好多坑都是安卓和iPhone端兼容的问题(用电脑谷歌浏览器输入  chrome://inspect/#devices可以用手机USB调试,打开)

eg:

1. 软键盘弹出时会影响到的页面布局
2. 如果在iframe中用到透明罩,想用fixed却失效?
3. angular中如果用$scope控制布尔值来添加/删除类时,获取这个节点的坑
4. 在获取用户头像等信息在canvas画图时加载的顺序

暂时遇到的问题,比较磨人一点(之后遇到会慢慢补充)

　　1. 对于h5页面产品,输入框弹出软键盘,页面布局可能会压缩(安卓手机存在,苹果无这bug),我用的单位是vh,所以会出现这个令人头疼的bug,知道了这个原因,先对万恶的安卓系统吐槽一遍,然后将高度的单位全部用vw替换,因为宽度不会变啊,调试一遍,跑一下页面,问题解决.

　　2.很多公司都喜欢开发的页面使用iframe,所以也引发了很多的问题,就比如说你想用吸顶条或者一个透明遮罩层的时候,习惯了想用position:fixed的我,用了fixed失效,狠狠的对公司使用这个iframe吐槽一遍,但是也只能老老实实的想其他办法去解决,想过利用js去控制高度等等处理办法,最傻的是用绝对定位,高度100%,然后安卓和苹果总有一个会出现问题,真是内心吐槽一万遍,这两个系统就是爱搞特殊化,而且是手指向上拖动手机屏幕时,遮罩层也跟着跑,扎心!!!

这个时候,灵光乍现的我想到了一个绝佳的办法,那就是js控制获取手机屏幕高度,用哪个方法呢?毕竟有好多,诸位别慌,且跟着往下看:

1. 网页可见区域高：document.body.clientHeight
2. 网页可见区域宽：document.body.clientWidth
3. 网页可见区域宽：document.body.offsetWidth (包括边线的宽)
4. 网页可见区域高：document.body.offsetHeight (包括边线的宽)
5. 网页正文全文宽：document.body.scrollWidth
6. 网页正文全文高：document.body.scrollHeight
7. 网页被卷去的高：document.body.scrollTop
8. 网页被卷去的左：document.body.scrollLeft
9. 网页正文部分上：window.screenTop
10. 网页正文部分左：window.screenLeft
11. 屏幕分辨率的高：window.screen.height
12. 屏幕分辨率的宽：window.screen.width
13. 屏幕可用工作区高度：window.screen.availHeight
14. 屏幕可用工作区宽度：window.screen.availWidth

　　看到这么多,你也许会想问我,这么多,都可以吗?那我偷偷的告诉你,你可不要告诉别人哦,用前面的12种方法获取到的你总会发现不是安卓闹小脾气就是ios要逗你玩,这个时候,你要掌握游戏的规则,不要被它所主导你的思维,我也就不墨迹了,这时候,你应该选用   13/14   屏幕的可用工作区宽高,这个算是都兼容

HTML:
<!-- you are jackpot -->
<div class="{{ isJackpot ? 'yJackpot' : 'nJackpot' }}"  style="">
    <div class="closeJackpot" ng-click="isJackpot = !isJackpot;">&times;</div>
</div>

CSS:
 
.yJackpot{
    transition: all linear 0.5s;
    -webkit-transition: all linear 0.5s;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    background: url(../images/prize.png) center no-repeat;
    background-size: 100% 100%;
}
.nJackpot{
    position: absolute;
    top: 0;
    left: 0;
    transition: all linear 0.5s;
    -webkit-transition: all linear 0.5s;
    background: url(../images/prize.png) center no-repeat;
    background-size: 100% 100%;
    z-index: 99;
    width: 0;
    height: 0;
}

(Angular1)js:
 
$scope.isJackpot = true;      //
setTimeout(function(){
　　console.log(window.screen.availHeight)
　　document.querySelector(".yJackpot").style.height = window.screen.availHeight + "px";
　　document.querySelector(".yJackpot").addEventListener('touchmove',function(e){
　　　　e.preventDefault();
　　},false)
},100)

　　上述js中你可能注意到我加了一个延时器,你们可能有点疑惑,好吧,这个问题就要和我的问题3挂钩了,怎么说呢,这就是dom加载和js加载先后的问题了,这也算开发中遇到的一个小坑,我很巧妙地加了一个延时,也许有更好的解决办法,只是我暂时还没发现,你们可以评论对我指教(龙在这里不胜感激,因为这是开发接触ng1,还没系统的学过ng1)

　　而之后的事件监听则是为了实现禁止用户拖动,哈哈,这个方法一瞬间出现在我脑海,瞬间敲出来测试,完美实现.只能说,有些东西还是得熟悉,才能在开发中活学活用

　　4.接下来要说的就是,获取用户头像之后,在画布上画图出现的问题了,这个比较恶心人,不对,是比较绕,容我小小的吐槽一次~

angular
    .module('name')
    .factory('myService', myService)
 
function myService($http, $q,$httpParamSerializerJQLike) {
    return {
        getUserNicknameMyID: getUserNicknameMyID,
        getWXShare: getWXShare,
        socialLogin: socialLogin
    };
　　//获取用户信息
    function getUserNicknameMyID(myId) {
        var params = {};
        params.myId= myId;
        return $http.get(ENDPOINT + 'getUserNickname', {
                params: params
            })
            .then(getUserNicknameComplete)
            .catch(getUserNicknameFailed);
 
        function getUserNicknameComplete(response) {
            return response.data;
        }
 
        function getUserNicknameFailed(response) {
            return $q.reject(response.data);
        }
    }
　　//微信分享
    function getWXShare() {
        var params = {};
        params.url = location.href;
        params.appid = 'appid';
 
        return $http.get('此处为链接', { params: params })
            .then(getWXShareComplete)
            .catch(getWXShareFailed);
 
        function getWXShareComplete(response) {
            return response.data;
        }
 
        function getWXShareFailed(response) {
            return $q.reject(response.data);
        }
 
    }
　　
    function socialLogin(code) {
        var params = {};
        params.code = code;
        params.base = "base";
        params.platform = 0;
        return $http({
                method: 'POST',
                url: ENDPOINT + 'socialLogin',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: $httpParamSerializerJQLike(params)
            }).then(postSocialLoginComplete)
            .
        catch(postSocialLoginFailed);
 
        function postSocialLoginComplete(response) {
            return response.data;
        }
 
        function postSocialLoginFailed(response) {
            return $q.reject(response.data);
        }
    }
}

　　以上我在factory中封装的请求方式,但是它是异步请求,所以你不知道你的用户信息在什么阶段获取到这个头像,然后去绘制,我就很傻了,先把所有的绘制完成再去绘制这个头像,问题就出来了,头像要么不绘制,要么就是给你绘制,随意的很,怎么办,只能收拾他,把之前所有的绘制方法各自封装成一个函数,然后一层一层的往下调用,上一步完成才往下走,将头像方法仍在了第一步,再次测试,发现完美解决,心里感觉舒服多了~

当然还有遇到的问题,估计大家使用过h5产品绘图的可能都知道,canvas并不能直接保存在手机,那怎么办呢,调用插件Canvas2Image.js,然后将其封装成一个函数,每次绘制之后都将其调用绘制在指定的img上面,并将img覆盖在canvas上面,实现以假乱真的效果....具体代码如下:

function createImg(canvas) { //在id为img元素内生成图片
	var img = document.getElementById("img");
	if(!img.hasChildNodes()) {
		img.appendChild(Canvas2Image.convertToImage(canvas, 750, 1180, "png"));
	} else {
		img.removeChild(img.childNodes[0]);
		img.appendChild(Canvas2Image.convertToImage(canvas, 750, 1180, "png"));
	}
}

　　好了,写了这么多,也有点困了,看看时间,已经是深夜23:46  记录于2018/03/08

　　明天会更好~~