作者归档:misster-kaiji

更换wordpress域名步骤

在更换域名之前 将wp项目拷贝到本地
用编辑器整站替换域名(我使用的是sublime text3 中的全局搜索替换功能 ctrl + shift + f)
再将 有改动的文件 依次更新替换到虚拟主机中

第一步:
登录域名解析网站(我使用的是阿里云解析)https://account.aliyun.com/login/login.htm
把新的域名解析到wp的主机

第二步:
进入主机管理(我使用的是阿里云虚拟主机)https://cp.aliyun.com/login
绑定新的域名到当前主机

第三步:
进入数据库管理(一定要先备份数据 以防出错)
执行以下语句 替换整站域名为新域名(包括文章、评论等等域名)

UPDATE wp_options SET option_value = replace(option_value, 'www.obyee.com','kaiji.obyee.com') ;
UPDATE wp_posts SET post_content = replace(post_content, 'www.obyee.com','kaiji.obyee.com') ;
UPDATE wp_comments SET comment_content = replace(comment_content, 'www.obyee.com', 'kaiji.obyee.com') ;
UPDATE wp_comments SET comment_author_url = replace(comment_author_url, 'www.obyee.com', 'kaiji.obyee.com') ;

参考资料:如何完美更换WordPress网站的域名

canvas实现拼合图片和文字并截图

图片载入画布时会存在跨域问题,需要服务器那边把图片移动到相同的域名上或者启用 CORS
也可以让后台转成base64格式再输出到页面上

'use strict';
        // 背景图片路径
        var bgMap = '<?=$file?>';

        // 用户头像图片路径
        var userMap = '<?=$buyer->getAvatar()?>';

        // 二维码图片路径
        var codeMap = '<?=$qrcode?>';

        // 用户名称
        var userName = '<?=$buyer->nickname?>';

            // 创建画布
            var canvasObj = document.createElement("canvas");
                canvasObj.getContext("2d");
                canvasObj.width = 750;
                canvasObj.height = 1206;

            // 初始化 2d画布上下文
            var canvas2D = canvasObj.getContext("2d");

            // 加载背景图片
            var bgImg = new Image();
                bgImg.crossOrigin = "Anonymous";
                bgImg.src = drawObj.bgMap;
                bgImg.onload = function() {

                    // 加载完成后 将背景图片载入画布
                    canvas2D.drawImage(bgImg, 0, 0, canvasObj.width, 1206);

                    // 填充画布内容 完成后执行回调 生成图片
                    draw(canvasObj, function() {

                        var imageUrl = canvasObj.toDataURL("image/jpeg", 1); // 图片格式, 图片质量 0 ~ 1

                        $('.J_loadMsg').style.display = 'none';
                        $('#image').src = imageUrl;
                        $('#image').style.display = 'block';
                        $('.tip-share').style.display = 'block';
                    });
                };
function draw(elm, callback){

            var canvas2D = elm.getContext("2d");
           
            // 加载用户头像
            var userImg = new Image();

            userImg.crossOrigin = "Anonymous";
            userImg.src = userMap;
            userImg.onload = function(){

                var l = elm.width / 2 - 90;
                    l = 0 > l ? 0 : l;

                // 编辑文本样式
                canvas2D.save();
                canvas2D.arc(elm.width / 2 - 2, 239, 84, 0, 2 * Math.PI);
                canvas2D.strokeStyle = "#ffffff";
                canvas2D.lineWidth = 3;
                canvas2D.stroke();
                canvas2D.clip();
                canvas2D.drawImage(userImg, l, 147, 180, 180);
                canvas2D.restore();
                canvas2D.textAlign = "center";
                canvas2D.font = "36px";
                canvas2D.fillStyle = "#2d2d2d";
                canvas2D.fillText(userName, elm.width / 2, 385);

                // 加载二维码图片
                var codeImg = new Image();

                codeImg.crossOrigin = "Anonymous";
                codeImg.src = codeMap;
                codeImg.onload = function(){

                    var ls = elm.width / 2 - 150;
                        ls = 0 > ls ? 0 : ls;

                    canvas2D.drawImage(codeImg, ls, 655, 300, 300);
                    canvas2D.restore();
                    callback();
                };
               
            };
           
        }

CSS中font的简写

以下一大堆样式:

font-style:normal; // 指定文本字体样式
font-variant:small-caps; // 指定文本是否为小型的大写字母
font-weight:bold; // 指定文本字体的粗细
font-size:12px; // 指定文本字体尺寸
line-height:1.5em; // 指定文本字体的行高
font-family:"微软雅黑",arial,verdana; // 指定文本使用某个字体或字体序列

可以简写成:

font:normal small-caps bold 12px/1.5em "微软雅黑",arial,verdana;

顺序:font-style | font-variant | font-weight | font-size | line-height | font-family

参考:font – CSS3参考手册

:before :after伪元素适用范围

伪元素虽然强大,但是还是有一些特定的标签是不支持伪元素 before 和 after 的。

诸如

<img> 、<input>、<iframe>

,这几个标签是不支持类似 img::before 这样使用。

究其原因,要想要标签支持伪元素,需要这个元素是要可以插入内容的,也就是说这个元素要是一个容器。而 input,img,iframe 等元素都不能包含其他元素,所以不能通过伪元素插入内容。

内容摘自:超级棒的伪元素before与after的使用-摘客
CSS3奇思妙想:CSS3奇思妙想