js插件---画图软件wePaint如何使用（插入背景图片，保存图片，上传图片）

一、总结

一句话总结：万能的wPaint方法，通过不同的参数执行不同的操作。比如清空画布参数传"clear"，获取图片数据参数是"image"等等

1、wePaint如何保存图片？

a、找到canvas对象，通过wPaint("image")方法获取 image数据

b、将获取的image数据赋值给一个img标签的src属性

  1.  function saveImage2()
  2.  {
  3.      var imageData2 = $("#wPaint2").wPaint("image");
  4.      $("#canvasImage2").attr('src', imageData2);
  5.  }

2、wePaint如何上传图片？

a、找到canvas对象，通过wPaint("image")方法获取 image数据

b、将这个获取的image数据通过ajax上传到服务器即可

  1.  function upload_image(id)
  2.  {
  3.      var imageData = $("#" + id).wPaint("image");
  4.      $.ajax({
  5.          url: '/wPaint/upload.php',
  6.          data: {image: imageData},
  7.          type: 'post',
  8.          success: function(resp)
  9.          {
  10.              alert('successfully uploaded image!');
  11.          }
  12.      });
  13.  }

这样保存的图片直接赋值给img标签的src属性就可以显示了

3、打开wePaint的时候如何载入背景图片？

js初始wePaint的时候传入图片参数（我们可以直接传入base64格式的图片数据）

就是我们上传图片存入数据库里面的内容

  1.  $("#wPaint2").wPaint({
  2.      menuOrientation: 'vertical',
  3.      image: "data:image/png;base64,iVBORw（中间省略一大段字母）YII=",
  4.      imageBg: 'images/demo/wPaint.png'
  5.  });

4、wePaint如何加载图片？

直接调用wPaint方法即可

  1.  function loadImage_png()
  2.  {
  3.      $("#wPaint").wPaint("image", "images/demo/wPaint.png");
  4.  }

5、如何清空绘画板？

还是wPaint方法，只是传入参数编程了clear

  1.  function clearCanvas()
  2.  {
  3.      $("#wPaint").wPaint("clear");
  4.  }

二、js插件---画图软件wePaint如何使用（插入背景图片，保存图片，上传图片）

百度盘下载地址：链接：https://pan.baidu.com/s/1bTU3TCeidcjPYhUtAaYfSA 密码：m14p

1、截图

2、代码

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title>Websanova Paint</title>
  6.  
  7.      <!-- jQuery -->
  8.      <script type="text/javascript" src="./inc/jquery.1.8.2.min.js"></script>
  9.      <script type="text/javascript" src="./inc/jquery.ui.core.min.js"></script>
  10.      <script type="text/javascript" src="./inc/jquery.ui.widget.min.js"></script>
  11.      <script type="text/javascript" src="./inc/jquery.ui.mouse.min.js"></script>
  12.      <script type="text/javascript" src="./inc/jquery.ui.draggable.min.js"></script>
  13.  
  14.      <!-- wColorPicker -->
  15.      <link rel="Stylesheet" type="text/css" href="./inc/wColorPicker.css" />
  16.      <script type="text/javascript" src="./inc/wColorPicker.js"></script>
  17.  
  18.      <!-- wPaint -->
  19.      <link rel="Stylesheet" type="text/css" href="./wPaint.css" />
  20.      <script type="text/javascript" src="./wPaint.js"></script>
  21.  
  22.  </head>
  23.  <body>
  24.  
  25.      <h2>Default</h2>
  26.  
  27.      <table><tr>
  28.          <td>
  29.              <div id="wPaint" style="position:relative; width:500px; height:300px; background:#CACACA; border:solid black 1px;"></div>
  30.          </td><td>
  31.              <img id="canvasImage" src=""/>
  32.          </td>
  33.      </tr><tr>
  34.          <td colspan="2">
  35.              <div>
  36.                  <a href="javascript:loadImage_base64();">load image (base64 encoded)</a> |
  37.                  <a href="javascript:loadImage_png();">load image (png)</a> |
  38.                  <a href="javascript:loadImage_jpg();">load image (jpg)</a> |
  39.                  <a href="javascript:saveImage();">save image</a> |
  40.                  <a href="javascript:clearCanvas();">clear canvas</a>
  41.                  <input type="button" value="Upload Image" onclick="upload_image('wPaint');"/>
  42.              </div><br/>
  43.  
  44.              image data: <input id="canvasImageData" type="text" />
  45.              down: <input id="canvasDown" type="text" />
  46.              move: <input id="canvasMove" type="text" />
  47.              up: <input id="canvasUp" type="text" />
  48.          </td>
  49.      </tr></table>
  50.  
  51.      <script type="text/javascript">
  52.          var wp = $("#wPaint").wPaint({
  53.              image: "data:image/png;base64,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",
  54.              drawDown: function(e, mode){ $("#canvasDown").val(this.settings.mode + ": " + e.pageX + ',' + e.pageY); },
  55.              drawMove: function(e, mode){ $("#canvasMove").val(this.settings.mode + ": " + e.pageX + ',' + e.pageY); },
  56.              drawUp: function(e, mode){ $("#canvasUp").val(this.settings.mode + ": " + e.pageX + ',' + e.pageY); }
  57.          }).data('_wPaint');
  58.  
  59.          function loadImage_base64()
  60.          {
  61.              $("#wPaint").wPaint("image", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAGQCAYAAABYs5LGAAAQdklEQVR4nO3dTcg211kA4KO72LRgi9JWpcuEatDEoFBaiVp/NhJKMdvSrMQuonWVXVQsAUGoblyIYCii7aKhLcaiYGxFN0UqBbULaUr+00YT89uvX97bxfd98uTp+zP3POfvmfe6YCCLfO+5z5wz9z1nZp6ZUgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFgoopxElNjbTkbHBQAsdEohf9M2Oj4A4AJnrMyt1AHgmCwo5lbpADA7BR0ANkBBB4ANWFrQI8obo2MFAM6QKOhW6QAwKwUdADZAQQeADYgobyjoALABCjoAbICCDgAbkLiP/sToWAGAMyQKune6A8CsPOkOABsQy764dmP71uh4AYBTRJRvuOwOABvgsjsAbEDmsvvoWAE244zk61Ioq0WUxxV0gI7c36QVBR2gk4WXRX23mlUUdIBOJFxaMr/gFDPc45whhq0atW8TTyI/0zoWtkdBhz0LDogfHB1D6/a3bOQ97ERBd+JGmoIOO2Lht4Ubx7DkPquEv8LCfftaw/aXFnRJlzRzC3YkEu7V0TG0an/LRu/bhScUNzaX3UkZPb9hKjOsoEa3v2WJ8f1so/b/MxGDqzCkyB2wQ0HfthmK6QxzjG0yr2DHDMk2EcMdrWLYqknGN3PZvdn9fLYnMa8+OTpWaC6iXJ0g4Q9fRW7VJAU9c9ndaorF5A7YMzrRSvbtJFfH/94wjsVjHFHubxUH2yJ3wJ7RB4SDsp2I8iczrGKSJxZWUywid8CexEHx1kbt+wxiQzMkvYjy+8lV+idaxcJ2yB2wJ5FkH27U/h0OynaSq+NvNowjU9CNNReKKJ80n2BHIsm+ODqGVu1vWUT5amKMW152fylZ1F9pFQvbIXfAjkmSvYOyoVlWxlbp1GYuwQ4Fffsid9n9U5PE0XTOsQ1yB+yYYcU0uv2ti4lewWqVTk3mEezIrJoaxuCgbGyWIhpRnksW9WYfBuL4zTCnYRpxXG+L+0yrGLZuloKejUUy5jzmEOyIKM+PPigSyd091ZUid//6K41j+USyqP9by3g4XqNzF0wlovxZIrHe0igGq7XGIsqDM504JU8wjDunMn9gTyKxfnlw+w7MA8y0nyPKLydX6fe1jonjM8t8hmkkkuqrjdof/mDeZZBcFX+9QzyZgu52C99D3oA9o5NqRPmMA7O9iPLPo8d6L56vzXTVgONj7sCeGZK8A7OP2QpocpXe7PXDHKeZ5jJMYYYkP7r9yyJyl93v6BDPd2eYfxwn8wb2ZJJ8wxgcmB1ElH9NFNCnOsWUWaXf1iMmjoO8AXsyq6SGMTgwO0kUzy4PoiWvGng4jv8nb8CeiPLs6ANjdPuXyWzFM6L8cWaV3iMmjoM5A3siyh8kEur7GsXQ/cBMrgzfVOgiyv01Y+kp0++OMWX2/xd6xcXcZpvHMIVEMv3qyPYrtfUTKwv5aYX96D4eMmlBfyOz33vFxbwiyh/NNo9hColk+trI9g9sY+2KfMn2Rq190VpEeTrRr2c7xXRbZn/3iIm5RZTXzRc4xejVUcsDM6Lc2rCQ728/W3vf1BZR7pixeCb381/3iov5RJRfmnEOwxQ2XtB7FfMb2wdr75/akv35SKeYvj16HnIcIsrnFHQ4Qwy+r9qq7cjdm622tdhHNWXGu2fx3NI+pp2I8mRirhzN7TCoYsMFvXsx710E14govzFj8UyeaPxor7iYS+SeA3lodLzQVUS5srWCHoNW5yMK4RrJvvxLp5heSsT0co+YmE9E+fzCOfLC6Fihu4jy2AYL+tBiPntRjyjPJfrR6yUzb5stJuYTUT4QF5+wf2N0nDBE5C7B3tOg/arFccHB3nOb9h7ejCcmM8bEfCLK78bZt2g+HVG+b3SMMEwikX59VNsN+rK//fgpf+v+cxLHUReeZL96XXbPxPRqj5iYU0T5+YjySER5Pq79SuKRiHLX6LhguEQSvTKq7QZ9ubEtunwbUa5urKBnfv7T67L7nx7Tvr3gBMRtAaC/kYl9ZEFfEWv6cn62jZ5m7Edy/z7aK669GD84234DKKWMKegR5aZIfKO7QV9W3d/eWEHPXOL+xQlj6r5/I8oD2TmwYjuJKPf27huwAZkkuvLvf+3QJJdoq2khSMY97UNxpZQSUf4u0ZenO8X0vuQ+7vI2u534Whfz/e2pnv0Djlztgh5R3hmJDygcS0HP7KdDThp6SvRnyrfGdY6r5Ud+LuxnRLmlV1+BIxVRvlOrSEWUV1oktERfmhTbiHJvq5hHmrE/EeXh2eIaXMwVdmCZiPIfa5NnVF6Jn7N9ZWFfqheBtck808Yomb51jiuzr29uGMddExTxswr7e1v1GzhSEeXXEonkvuv/5ubeCWxhX5b+vQvvvWaK3Snb1PfPb4goTyX69HMd43o1EdcXG8YxunAr7EBOIoF8M/n/V9sq9+O8BPmlHrHOIHLfSH+ic2xL43qpUfuzXGZfOm9va7EfgCOTSBzfjdzqqdpWuR8tt7saD1dVmaJxWeKKKB+ZYB6t2RR2uOySCWNIsqrcj1bbR1uPVW21x2BAXC0K+jGtzs86Th+vvV+AI5BMFEOS1MJ+DP1pUetxaiESb8DrHNewB/YGF+Pq8zKi3F57HwGTGlwIqyXtiPL+meObUQz+hO45cR1bQT/vK2B/e0F7mYcTVxf22vsJmFAmeVbY/muv7apJu3Nfbmy/UH9U+ogoPzOqcF4Q18sj4or8O/tPdv7tQV8Bi2vvO2g9f99ec38Bk4koryUSwpqH4t51TtvVk3anIn5j6/Ke85ZGFM4FMf19YgwerNhuZuw/VavdvRhuaVzYFXXYqkh+KCWROF5c0HaLgv5jHQr5Zi5hTlrQ35kYi6sV2108B2q1eU4sLQu7og5bFFF+MpEI/vD6vzntLXGvr2i7WfJslAw3U8hvmKWArY2rZmwzFfSdmN7baC6/o1cfgI4SSeDZEe0e8PdrJsJfrdn3WcxWwHbiyozdD1doL3P/vPvbABsVdkUdtiaRAKpd3sy0e8Dfv7NC0tvcqnzXxAX96cQYPVehvcVzokb/DojztpqFfWRfgAZGFbceSefQ5Ferr7OadT9ElLf0nJfHNicqFvZNn7DCpTMqmfVqs9JqZpOJb+Yi1nNeHltB3xVRHj+wuN86ug9AJZlkULndXsn6yUpFfbpkfqiZ+x1RribG5q8ObGtpO9N+TS+i3L5yXm/yZBUupa0X9Ott1brvuKnkl+h3s2+PnxPb7/Ual5lPbDIiytvXzOvRcQOVRJRXtl7QM+0tKR4R5adrxTVSos/PTB7foc9abKbwrSnqo2MGKokoj16Ggn69zZo//Tn6j1/MnvST4/U3B7Qz7T5YI6K8Y/axBRqIKO9OHPwPVWx3SLKJKE9ULOr7BX7xN6nj2vu/vxDXPpLy2PX/vqt2fy+IYeqkH1H+IrP/D2ineRu9RZRbZx5boJFEQvuf3m3Wau+U9lu+M/skotxyRrs3xdmv3D2JKA+06vMpsfz36HFYEGPzk47k2N5Ts38tzT62QAOJZFbtKd9Em80eyGpc1L9nf0WUf1h4MvD+Vn3ei+fm2ZN+coxuWtlGdlzvrN3PFmYfW6CBRCKrdskx0WbTB7IaF/S125db9nlN/3vFc0p8n07stz9f2UZ6jGr3s7ZI3EobHStQ0YhENlPyjDHfUj9ve611n3f6PsUY1Igxojy18u9nv4UeMfH99IjyKzMdX0BHmYJWsc0pE84Exbxrn2eL55AYI8qVDm1Uaa+VzLE8w9gClQ0q6NM+kLUmKVbeur2RbNYxWBNjHPak+z0rx2qalfra+TY6bqCiiPLigIK++IGsiPKbtdpNxHf7wMLe7UUux5D0M+PQq51TtiGr9Yjy8bh2y2B17CPiBhqJa7+B7n7wJ5LO0zXbTcb4UwMKe7cTmFh2/3joO8wjypVe8/PAcTuJKPfV6POCODPvup92bIHKIspbJy/ow5NO9FuxP9q5X88siGnIq193YnyqY0G/s8IYNrsMH1HeU3O+tYqzhnOOt2luc8B0Ispzkxf06RJP1Psm9Y3txYjyWwP6ce+C2D7aO669GBe/Ma5SezWKekSUj9WIZyeuu2sW84jyrprx1XSMOQGmMKqwxvJLqd1+xrVGRLnlgKR6JaL8wOD4//Gc+B4dGdv1+BZ/cKRim4sv81+wnUSUqwfGcnfUvzr07lr7qrYVfVn1c0XYpIEF/cGF7X6pZrutRJTXk4mo2wtkLhJRfjuifOt64Ti5/t/drxicZdD8rF1EU7eOIsqHGsQQEeVHau6nmiLKBw7o1yuj44fhRhX0620/dkGb3V6FyrwGzs/axfTC4h5RPtyokE9/7zmifK5CP98yuh8wTOJAeb5R+188p5g/0KJNjktijr6tQdstH4a80qmt6Yt5KaVElCdr9Hd0P2CYGQ6SuPY50UciyvMR5dvX//uulm1yPBLJ/MVG7f9O48LecjuKYl5KKRHl6Up9fnl0X2CIGQo6nCeZzJs98BX1HpbrtR30QF5vEeXztfo+ui8whAOE2SWT+Qsd4pl1tX4S114W9PHW+6CFOOyhOPkKHCDMbE2S7xTXfRMU8N3tPT363ZqCDgdwgDCzWPHkc+f4Rq/Wj+Ye+RIKOhxgYULaVNLgeMSKJ58HxPixAYX9JKLc3buvrcW679MPnwMwhbj2ZPlFB0iTn6zBRSLK48eUzKPeh1MuVSHfpaDDSnEE7/Pm8ooof3mMyTzqr9hPIsqHRverh4jyQwfuq++M7gMME5O/z5vLK6L8+jEW9F1x+M/dPjy6DyOsPSkaHTcMF5O/z5vLKaJ8f0T53y0k9MjfH/bsShnzgR4AGojkT8RGx0sbF6zYUx+/AWCQiPJPCwu6xA4AM4uzP+Szuz00Ok4A4AIR5YVzinnz174CAJVElIf3HjB7I6J8dnRcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAm/0frx+55AOewsEAAAAASUVORK5CYII=");
  62.          }
  63.  
  64.          function loadImage_png()
  65.          {
  66.              $("#wPaint").wPaint("image", "images/demo/wPaint.png");
  67.          }
  68.  
  69.          function loadImage_jpg()
  70.          {
  71.              $("#wPaint").wPaint("image", "images/demo/wPaint.jpg");
  72.          }
  73.  
  74.          function saveImage()
  75.          {
  76.              var imageData = $("#wPaint").wPaint("image");
  77.  
  78.              $("#canvasImage").attr('src', imageData);
  79.              $("#canvasImageData").val(imageData);
  80.          }
  81.  
  82.          function clearCanvas()
  83.          {
  84.              $("#wPaint").wPaint("clear");
  85.          }
  86.  
  87.          function upload_image(id)
  88.          {
  89.              var imageData = $("#" + id).wPaint("image");
  90.  
  91.              $.ajax({
  92.                  url: '/wPaint/upload.php',
  93.                  data: {image: imageData},
  94.                  type: 'post',
  95.                  success: function(resp)
  96.                  {
  97.                      alert('successfully uploaded image!');
  98.                  }
  99.              });
  100.          }
  101.      </script>
  102.  
  103.      <h2>Load Image With Background</h2>
  104.      The background cannot be modified, but will be part of the save (try the eraser):
  105.  
  106.      <table><tr>
  107.          <td>
  108.              <div id="wPaint2" style="position:relative; width:500px; height:300px; background:#CACACA; border:solid black 1px;"></div>
  109.          </td><td>
  110.              <img id="canvasImage2" src=""/>
  111.          </td>
  112.      </tr><tr>
  113.          <td colspan="2">
  114.              <div>
  115.                  <a href="javascript:saveImage2();">save image</a> |
  116.                  <a href="javascript:updateBg2();">update bg</a>
  117.                  <input type="button" value="Upload Image" onclick="upload_image('wPaint2');"/>
  118.              </div><br/>
  119.          </td>
  120.      </tr></table>
  121.  
  122.      <br/><br/>
  123.  
  124.      <script type="text/javascript">
  125.          $("#wPaint2").wPaint({
  126.              menuOrientation: 'vertical',
  127.              image: "data:image/png;base64,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",
  128.              imageBg: 'images/demo/wPaint.png'
  129.          });
  130.  
  131.          function saveImage2()
  132.          {
  133.              var imageData2 = $("#wPaint2").wPaint("image");
  134.  
  135.              $("#canvasImage2").attr('src', imageData2);
  136.          }
  137.  
  138.          function updateBg2()
  139.          {
  140.              $("#wPaint2").wPaint("imageBg", 'images/demo/wPaint.jpg');
  141.          }
  142.  
  143.      </script>
  144.  </body>
  145.  </html>
 

js插件---画图软件wePaint如何使用（插入背景图片，保存图片，上传图片）的更多相关文章

  1. 关于HTML表格中插入背景图片的问题_百度知道 3个回答 - 提问时间: 2009年03月23日 最佳答案: <tr style="background-image:url(1.jpg)"> (这事设置背景图片) <img src="images/bbs_student1.gif" />如果是这样的就是直接插入图片。你看看,...

    关于HTML表格中插入背景图片的问题_百度知道 3个回答 - 提问时间: 2009年03月23日 最佳答案: <tr style="background-image:url(1.jpg ...

  2. css插入背景图片底部有白边的解决方法

    相信很多小伙伴遇到过用CSS插入背景图时,底部出现白边的情况,如下图:   个人总结了2个方法如下: 解决方法1:给图片都加上 vertical-align: middle属性.有时,移动端也会有类似 ...

  3. CAD插入背景图片（网页版）

    把图片作为背景图片可见但是不能编辑操作. 主要用到函数说明: _DMxDrawX::DrawImageToBackground 绘光栅图到背景.详细说明如下: 参数 说明 BSTR sFileName ...

  4. 在Excel表里面插入背景图

    工作中我们会经常用到MS Excel,通常我们打开MS Excel,里面的工作表都是空白单调的背景.当然了,MS Excel可以在工作簿里面插入背景图片.那么问题来了,如果你没有安装Microsoft ...

  5. 一款js控制背景图片平铺

    背景图片的平铺方法有很多种,纯色背景,渐变背景,图片背景,今天讲的是移动端的图片背景~~~~ <style> html,body{;;} .body{background: url(ima ...

  6. VS 小插件 之 编辑器背景图片

    一.引言 不知道标题的名字我描述的是否正确哈,其实就是用VS写代码的时候,背景一般都是纯白 或者 纯黑(看主题而定),那么我前段时间发现 只需要一个VS插件,居然可以给VS设置背景图片,甚至还可以循环 ...

  7. 代码规范和常用的js插件以及测试工具

    1.代码规范 .model层 1.1.1database file_proerty 1.1.2java fileProperty. 1.2.字段要有空指针 1.3.不创建爱数据库外键约束 1.4.已知 ...

  8. spin.js插件的转圈加载效果

    先上插件链接地址:http://fgnass.github.io/spin.js/ 以下是使用spin.js插件的完整版测试例子: <!doctype html> <html> ...

  9. 前端开发需要了解的JS插件

    excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...

随机推荐

  1. BZOJ 1174: [Balkan2007]Toponyms

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 735  Solved: 102[Submit][Status][Discuss] Descriptio ...

  2. c# window服务-初学习

    window服务-初学习 一.工具: VS2015+NET Framework4.5. 二.操作: 1.新建windows服务的项目: 2.修改windows服务相关内容: 3.预览windows服务 ...

  3. SQL_触发器学习

    --触发器学习-------------------------------------------------------------------------------after 触发器----- ...

  4. 操作系统——第五章 输入输出(I/O)管理

    这就是SDT表和DCT表

  5. NodeJS学习笔记 进阶 (5)将图片转成datauri嵌入到html(ok)

    个人总结:这篇文章讲解了使用Node处理转换base64编码图片,读完这篇文章需要5分钟. 摘选自网络 问题:将图片转成datauri 今天,在QQ群有个群友问了个问题:“nodejs读取图片,转成b ...

  6. NodeJS学习笔记 (32)安全加密-tls

    https://github.com/chyingp/nodejs-learning-guide

  7. PHP取不定个数数组交集

    最近有个需求,有一个N个二维数组,N是动态的,不固定个数,现需取这N个数组的交集内容. 用到的函数是array_intersect_assoc 用法 $result_arr = array_inter ...

  8. 【Henu ACM Round#19 B】 Luxurious Houses

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 从右往左维护最大值. 看到比最大值小(或等于)的话.就递增到比最大值大1就好. [代码] #include <bits/std ...

  9. svn 的使用（二）

    这篇主要介绍下 svn 钩子的使用,svn 的安装以及配置等能够查看svn 的使用(一) 我们能够在svn创建的仓库目录下看到 hooks 目录. 这里面就存放这个各种svn操作同一时候会运行的脚本文 ...

  10. CentOS 配置防火墙操作实例（启、停、开、闭port）

    CentOS 配置防火墙操作实例(启.停.开.闭port): 注:防火墙的基本操作命令: 查询防火墙状态: [root@localhost ~]# service   iptables status& ...