标签 js 下的文章

最近摸索前端canvas画布和后端图像加工相关的一些功能。写了个练手程序，为了让前端（js控制css）预览的体验与后端php图像处理一致。总结了几点经验。

先上成品，表情包生成器：
https://gen8.orz.com.cn/mymeme
QQ截图20191227142153.png

img11.jpg

*此文并非系统且科普的教学，讲述的内容基于我个人备忘比较跳跃和零散。

目标:

  1. 用户上传模板图
  2. 在图上画出一个录入文字的涂鸦区域（定义尺寸、位置、文字大小、角度），并可以预览效果
  3. 保存成方案，之后可以打开与分享这个方案。把输入的文字（段子）合成到图片上
  4. 根据涂鸦区域的大小与文字的多与少，一定范围内自动调节文字的大小（未做更换字体、颜色）

这几个目标遇到问题较多的是预览前端的涂鸦区预览 与 后端生成图片的一致性。



- 阅读剩余部分 -

之前备忘了php 的，也把js的写一下吧，懒得费脑子写连记住都觉得浪费能源。

//验证手机号合法性
function valid_phone(phone){
    var flag = false;
    var myreg = /^(1[3-9]{1}[0-9]{9})$/;
    if (phone == '') {
        console.log("手机号码不能为空");
        //errmsg = "手机号码不能为空！";
    } else if (phone.length != 11) {
        console.log("请输入11位手机号码！");
        //errmsg = "请输入11位手机号码！";
    } else if (!myreg.test(phone)) {
        console.log("请输入有效的手机号码！");
        //errmsg = "请输入有效的手机号码！";
    } else {
        flag = true;
    }
    return flag;
}

errmsg 和 console.log 输出都是没用的，只是以防需要额外的交互。

不是恰饭哈，只是最近刚巧一个项目要页面上做比较多的图表，用专业点的术语叫数据透视页。
所以找了下看什么现成的控件适合使用。

要求比较低
部署简易、兼容微信、支持柱状、折线、雷达图、能找到开发团队交流反馈bug就好。

后来找到了 uCharts
官网：https://www.ucharts.cn/
git: https://gitee.com/uCharts/uCharts
文档： http://doc.ucharts.cn/

项目需要保密，但我用它美化了一下自己的博客，右上角增加了实时的热门tags，用了控件的词云图 类型实现。
QQ截图20191017223025.png

以下是部署简要笔记







- 阅读剩余部分 -

经验教训只有1句：做人千万不要手贱！

盲写了80多行的js, 运行~~ ..

无论如何函数都提示未定义，看浏览器的F12排除网络问题也排除拼写错误，但就是不认刚写的函数。
查半天浪费几个小时浏览器都刷新爆了。

*国内网有篇博客被转载九万多次的，列举的3个原因并没有鸟用。再次鄙视国内的转载复制黏贴风。

发现只是自己智障用自动补完添加了多余的内容

<script type="javascript" src="js/main.js"></script>

去掉或者修改为 type="text/javascript" 一切正常

<script src="js/main.js"></script>

我给自己跪了，TMD...为了这么无聊的事情熬夜

js函数多参数、默认值写法。
基础，但总是执笔忘，以前总去查自己的旧blog...那在这边再写一遍。

function mFun(){
    var arg1 = arguments[0]?arguments[0]:1; //参数1, 默认值1
    var arg2 = arguments[0]?arguments[0]:false; //参数1, 默认值 false

    if(arg2) 
        return arg1;
    else
        return 0;
}

var a = mFun(); // 0
var b = mFun(3,true); //3
var c = mFun(2); //0
  1. 1
  2. 2