• canvas 合并图片处理添加文字

    发表于 2018-11-13 10:08:31   |   下载附件
    canvas图片图片合并H5 canvas
    // 绘制图片
    drawImg() {
    
        // 创建图片基本属性
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        let __width = 110 * 4;
        let __height = 145 * 4;
        canvas.width = __width;
        canvas.height = __height;
    
        // 图片背景色
        ctx.fillStyle = "#FFF";
        ctx.fillRect(0, 0, __width, __height);
    
        // 加载 第一张图片
        var imgCode = new Image();
        imgCode.src = document.getElementById('qrcodeImg').querySelector('img').src;
        imgCode.onload = function() {
    
            // 绘制 第一张图片
            ctx.drawImage(imgCode, __width * 0.25, __height * 0.4, __width * 0.5, __width * 0.5);
    
            // 加载 第二张图片 LOGO
            var imgLogo = new Image();
            imgLogo.src = imgLogo.src = document.getElementById('logoImg').src;
            imgLogo.onload = function() {
    
                // 绘制 第二张图片 LOGO
                ctx.drawImage(imgLogo, __width * 0.15, __width * 0.1, __width * 0.7, __width * 0.35);
    
                // 文本绘制
                ctx.font = 5 * 4 + "px Arial";
                ctx.fillStyle = '#333'; // 文字颜色
                ctx.textAlign = 'center'; // 文本水平对齐方式
                // ctx.textBaseline='middle';                                                // 文本垂直方向,基线位置
                ctx.fillText(lang.shareUrlImgText, __width * 0.5, __height * 0.9); // 创建文字,控制文件的起始位置
    
                // let imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height);
                // ctx.putImageData(imgdata, 0, 0);
                // 得到图片src数据
                let baseImgData = canvas.toDataURL();
                // 图片src赋值
                document.getElementById('sharePhoto').src = baseImgData;
    
            }
    
        }
    }
  • 原生dom选择器

    发表于 2018-11-02 10:02:07   |   下载附件
    dom选择器选择器dom操作
    var obj = document.querySelector(cssselecter);
    var obj = document.querySelectorAll(cssselecter);

    querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素。两者不同的是querySelector返回的是一个匹配对象,querySelectorAll返回的一个集合(objNodeList )。用过jquery或者是zepto的应该都熟悉css选择器,就不多说了,不会的可以看看这篇:CSS选择器
    目前支持他们的浏览器包括。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera等。


  • 移动端弹层居中定位CSS样式

    发表于 2018-10-28 20:56:20   |   下载附件
    居中定位css 居中居中弹窗移动端居中弹窗
    /* 外容器 */
    .mask {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 4999;
        background: rgba(0, 0, 0, 0.5);
        /* 内容区 */
        .cont {
            position: fixed;
            z-index: 5000;
            width: 80%;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            background-color: #FFFFFF;
            text-align: center;
            border-radius: 5px;
        }
    }
  • vue项目中使用lib-flexible解决移动端适配的问题

    发表于 2018-10-18 14:02:32   |   下载附件
    vue 浏览器适配lib-flexible解决移动端适配移动端适配APP页面适配
    1.此方法只能将.vue文件style标签中的px转成rem,不能将script标签和元素style里面定义的px转成rem
    2.如果在.vue文件style中的某一行代码不希望被转成rem,只要在后面写上注释 /* no*/就可以了
  • vue webpack打包后.css文件里面的背景图片路径错误解决方法

    发表于 2018-10-15 16:45:48   |   下载附件
    vue打包vue打包关于css中的背景图片webpack vue 打包css 背景图片地址错误

    1、使用绝对路径,打包后成了 url(/static/img/logo-index.2f00bf2.png) no-repeat

    2、使用相对路径,打包后成了 url(static/img/logo-index.2f00bf2.png) no-repeat

    但是CSS资源里面的背景图片,不像index.html中加载资源一样,通过./static/js/app.js引用可以正常加载,解决办法,打开webpack.prod.conf.js,参考详情说明步骤,添加字段 publicPath:'../../',

  • JavaScript - window 尺寸 ( 获取屏幕宽高 )

    发表于 2018-10-13 15:49:02   |   下载附件
    window宽高浏览器宽度浏览器高度
    var w=window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;
    
    var h=window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;
  • 官能强度检测

    发表于 2018-10-12 13:46:34   |   下载附件
    密码强度检测password
    项目中需要一个密码强度的校验,找了好久,搜到这个挺好用的,记录一下。在一些网站注册的时候经常可以看到密码强度提示,例如优酷:
    //密码强度校验
    function checkPassword3(fieldId,tipMsg){
    	/*
    	 返回密码的强度级别
    	 */
        function checkStrong(sPW) {
            if (sPW.length < 8||sPW.length > 20)
                return 0; //密码太短或太长
            Modes = 0;
            for (i = 0; i < sPW.length; i++) {
                //测试每一个字符的类别并统计一共有多少种模式.
                Modes |= CharMode(sPW.charCodeAt(i));
            }
            return bitTotal(Modes);
        }
    	/*
    	 判断字符类型
    	 */
        function CharMode(iN) {
            if (iN >= 48 && iN <= 57) //数字
                return 1;
            if (iN >= 65 && iN <= 90) //大写字母
                return 2;
            if (iN >= 97 && iN <= 122) //小写
                return 4;
            else
                return 8; //特殊字符
        }
    	/*
    	 统计字符类型
    	 */
        function bitTotal(num) {
     
            modes = 0;
            for (i = 0; i < 4; i++) {
                if (num & 1) modes++;
                num >>>= 1;
            }
            return modes;
        }
        /**
    	 * 密码强度等级说明,字符包括:小写字母、大写字母、数字、特殊字符
    	 * 1---密码包含其中之一
    	 * 2---密码包含其中之二
    	 * 3---密码包含其中之三
    	 * 4---密码包含其中之四
         */
        var fieldValue=getValue(fieldId);
        if(fieldValue!=""&&checkStrong(fieldValue) < 2){
        	tipMsg='登录密码由8-20位数字+字母组成,字母区分大小写';
            errShow(fieldId,tipMsg);
            return false;
        }
        return true;
    }
  • vue 实现复制到粘贴板功能需要依赖到 clipboard.js

    发表于 2018-09-11 16:16:51   |   下载附件
    clipboard复制粘贴vue 复制粘贴

    1、 首先需要安装依赖  * 出现错误的话,可以试试 cnpm

    npm install --save vue-clipboard2

    2、 安装成功之后就可以开始使用了

    2.1、template代码:

    <span>订单编号:{{orderNumber}}</span>
    <el-button class="ml10"
        type="text"
        size="medium"
        v-clipboard:copy="orderNumber"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError">
        点击复制
    </el-button>

    2.2、javascript代码:

    // 引入依赖
    import Vue from 'vue'
    import VueClipboard from 'vue-clipboard2';
    Vue.use(VueClipboard);
    
    export default {
    	data(){
    		return {
    			// 复制的内容
    			orderNumber: 'xxxxxxxxxxxsx'
    		}
    	},
    	methods: {
    	    // 复制成功
    	    onCopy(e){
    	    	console.log(e);
    	    },
    	    // 复制失败
    	    onError(e){
    	    	alert("失败");
    	    },
    	}
    }
  • webstorm 快捷键整理

    发表于 2018-08-30 11:26:21   |   下载附件
    webstormwebstorm 快捷键
    webstorm应该是目前最强的js编辑器了,结合sublime text可以很效率的开发项目。今天整理了一些webstorm比较实用的快捷键
  • 浏览器全屏JS实现代码

    发表于 2018-08-01 13:38:51   |   下载附件
    全屏浏览器全屏JS代码实现浏览器全屏requestFullScreenexitFullscreenmsRequestFullScreen
    //全屏
    function fullScreen(){
        var el = document.documentElement;
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;      
            if(typeof rfs != "undefined" && rfs) {
                rfs.call(el);
            };
          return;
    }
    //退出全屏
    function exitScreen(){
        if (document.exitFullscreen) {  
            document.exitFullscreen();  
        }  
        else if (document.mozCancelFullScreen) {  
            document.mozCancelFullScreen();  
        }  
        else if (document.webkitCancelFullScreen) {  
            document.webkitCancelFullScreen();  
        }  
        else if (document.msExitFullscreen) {  
            document.msExitFullscreen();  
        } 
        if(typeof cfs != "undefined" && cfs) {
            cfs.call(el);
        }
    }
    //ie低版本的全屏,退出全屏都这个方法
    function iefull(){
        var el = document.documentElement;
        var rfs =  el.msRequestFullScreen;
        if(typeof window.ActiveXObject != "undefined") {
            //这的方法 模拟f11键,使浏览器全屏
            var wscript = new ActiveXObject("WScript.Shell");
            if(wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }
    }
    //注:ie调用ActiveX控件,需要在ie浏览器安全设置里面把 ‘未标记为可安全执行脚本的ActiveX控件初始化并执行脚本’ 设置为启用
每页显示10条,当前为第5页,总页数为19页