获取图片的原始宽高度

html结构

<img id="image_id" src="" alt="">
<div class="color-end" style="width:200px;height:200px;border:1px solid #000;"></div>

function getImgWidthHeight() {
  var img = new Image();
  img.addEventListener('load', function () {
    console.log('-----', img.width, img.height, img.naturalWidth, img.naturalHeight);
    // if need color
    // var canvas = document.createElement('canvas');
    // getImageColor(canvas, img); 
  }, false);
  img.src = 'https://static-image.xfz.cn/1535618935_589.jpg' + '?' + new Date().getTime();
  img.setAttribute('crossOrigin', '');
}

获取图片的平均色值

function getImageColor(canvas, img) {
      canvas.width = img.width;
      canvas.height = img.height;

      var context = canvas.getContext("2d");

      context.drawImage(img, 0, 0);

      // 获取像素数据
      var data = context.getImageData(0, 0, img.width, img.height).data;
      
      var r = 0;
      var g = 0;
      var b = 0;

      // 取所有像素的平均值
      for (var row = 0; row < img.height; row++) {
        for (var col = 0; col < img.width; col++) {
          r += data[((img.width * row) + col) * 4];
          g += data[((img.width * row) + col) * 4 + 1];
          b += data[((img.width * row) + col) * 4 + 2];
        }
      }

      // 求取平均值
      r /= (img.width * img.height);
      g /= (img.width * img.height);
      b /= (img.width * img.height);

      // 将最终的值取整
      r = Math.round(r);
      g = Math.round(g);
      b = Math.round(b); 

      var str = "rgb(" + r + "," + g + "," + b + ")";
      console.log('======str', str)
      // $('.color-end').css('background', str);
}

react-native 环境

前言

入坑react，一上来就给你个下马威啊，吓得我啊。。。不管如何还是要继续不是

参考文档

参考文档：react-native中文文档，英文好的人推荐还是看英文文档吧

环境说明

• xcode v8.3.3
• node v6.10.2
• npm v5.2.0

然后按照文档里面的步骤

     npm install react-native -g
     npm install react-native cli -g

HTML空格占位符

  == 普通的英文半角空格

  ==   ==   == no-break space （普通的英文半角空格但不换行）

　 == 中文全角空格 （一个中文宽度）

  ==   == en空格 （半个中文宽度）

  ==   == em空格 （一个中文宽度）

  == 四分之一em空格 （四分之一中文宽度）

用函数画图

<?php
//创建图片
$img = imagecreatetruecolor(500, 500);
//分配颜色 为图片准备需要用到的颜色
$red = imagecolorallocate($img, 255, 0, 0);
$green = imagecolorallocate($img, 0, 255, 0);
$blue = imagecolorallocate($img, 0, 0, 255);
$pur = imagecolorallocate($img, 255, 0, 255);
$yellow = imagecolorallocate($img, 121, 72, 0);
//填充背景 (0,0)(500,500)指图片左上角和右下角两点，从而确定图片的矩形
imagefilledrectangle($img, 0, 0, 500, 500, $green);
//画对角线 对角线起始点坐标
imageline($img, 0, 0, 500, 500, $red);
imageline($img, 500, 0, 0, 500, $blue);
//画圆
//bool imagefilledellipse ( resource $图片资源 , int $圆心x , int $圆心y , int $圆的宽 , int $圆的高 , int $圆的颜色 )
imagefilledellipse($img, 250, 250, 200, 200, $yellow);
//圆中间画矩形，同样通过左上角右下角确定矩形
imagefilledrectangle($img, 200, 200, 300, 300, $blue);
//保存图片，图片名为haha.jpg
imagejpeg($img, 'haha.jpg');
//销毁资源
imagedestroy($img);
?>

画验证码

代码链接

图片加水印

bool imagecopymerge ( resource $目标图片 , resource $来源图片, int $目标开始的x , int $目标开始的y, int $来源的x , int $来源的y , int $来源的宽 , int $来源的高 , int $透明度)
注意：
透明度的值为0-100的整数。imagecopy和imagecopymerge的区别在于一个有透明度，一个没有透明度。
大致步骤：
1.打开原图（也叫操作的目标图片）
2.打开水印图（也叫水印来源图片）
3.使用 imagecopymerge 将小图合并至大图的指定位置
4.输出图片
5.销毁资源
代码链接

图像放缩和裁剪

操作方式说明：
从来源图片的开始点(x,y)起，指定的宽高的大小图片。放至到目标图片的起点(x,y)，指定宽高大小的图片中。

缩放图片

imagecopyresampled 重采样拷贝部分图像并调整大小
bool imagecopyresampled ( resource $目标图 , resource $来源图 , int $目标开始的x位置 , int $目标开始的y位置 , int $来源开始的x位置 , int $来源开始的y位置 , int $目标图片的宽 , int $目标图片的高, int $来源图片的宽 , int $来源图片的高 )
大致步骤：
1.打开来源图片
2.设置图片缩放百分比（缩放）
3.获得来源图片，按比调整大小
4.新建一个指定大小的图片为目标图
5.将来源图调整后的大小放到目标中
6.销毁资源

//打开来源图片
$image = imagecreatefrompng('fbb.png');
//定义百分比，缩放到0.1大小
$percent = 0.1;
// 将图片宽高获取到
list($width, $height) = getimagesize('fbb.png');
//设置新的缩放的宽高
$new_width = $width * $percent;
$new_height = $height * $percent;
//创建新图片
$new_image = imagecreatetruecolor($new_width, $new_height);
//将原图$image按照指定的宽高，复制到$new_image指定的宽高大小中
imagecopyresampled($new_image, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
header('content-type:image/jpeg');
imagejpeg($new_image);
?>

裁剪图片

imagecopyresized 拷贝部分图像并调整大小
bool imagecopyresized ( resource $目标图 , resource $来源图 , int $目标开始的x位置 , int $目标开始的y位置 , int $来源开始的x位置 , int $来源开始的y位置 , int $目标图片的宽 , int $目标图片的高, int $来源图片的宽 , int $来源图片的高 )
大致步骤：
1.打开来源图片和目标图片
2.截取来源图片中的点，设置宽高。放至到目标图片中。（裁剪）
3.保存图片输入
4.销毁资源

<?php
$dst = imagecreatefrompng('hsq.png');
$src = imagecreatefrompng('du.png');
imagecopyresized($dst, $src, 281, 71, 407, 154, 132, 160, 80, 90);
header('content-type:image/jpeg');
imagejpeg($dst);
imagedestroy($dst);
imagedestroy($src);
?>

git 记录

git 中重命名忽略大小写问题

总结起来网上的2大势力

1. git config core.ignorecase false // git 设置 记录文件大小写
2. git mv -f OldFileNameCase newfilenamecase // 强制换名

方法1 不兼容windows，windows下不区分大小写，但是linux是区分大小写的。。。。坑妈呀
方法2 会产生一个多的文件

可行的方案

$ git mv ./name1 ./name1.bak
$ git add .
$ git commit -m "改名（第 1/2 步）"

$ git mv ./name1.bak/ ./name2
$ git commit -m "改名（第 2/2 步）"

$ git push

1.参考文档
2.stackoverflow