jQuery TOOLS使用時ajax POSTうまく機能しない

overlayなど簡単に実現できるjQuery TOOLSライブラリを入れる場合、jqueryそのものが勝手に入れてくれる。なぜか、以前うまく機能していたコードがエラーになって、データをサーバーに転送されなくなった

$.ajax({
          method: "POST",
          url: '/Projects/ajaxCall',
          data: { "base64image" : base64image, "projectName" : projectName },
          success: function (msg) {
              alert("デザインが保存されました。");
              console.log("OK");
          },
          error: function (response, desc, exception) {
              console.log("NG");
          }
      });

そして、ajaxで"POST"を指定することではなく、直接にpost methodを使うことで解決した。原因はわからないが、jQuery TOOLSライブラリのせいだと思う

$.post(
        '/Projects/ajaxCall',
        {
          "base64image" : base64image,
          "projectName" : projectName
        },
        function(data){
          alert("デザインが保存されました。");
          console.log("OK");
        });

htmlのimg tag内base64画像をサーバーに送信(cakephpの場合)

<img src="data:image/jpeg;base64,/9j.....=">

このsrcの画像をサーバーに送りたい。

JS側は以下のような感じ
function asyncSend() {
      // Generate the image data
      var base64image  = $("#createdPic").attr('src');
      // Sending the image data to Server
      $.ajax({
          method: "POST",
          url: '/Projects/ajaxCall',
          data: { "base64image" : base64image },
          success: function (msg) {
              console.log("OK");
          },
          error: function (response, desc, exception) {
              console.log("NG");
          }
      });
    }

サーバー側はcakephpを使用
public function ajaxCall() {
$this->autoRender = FALSE; //Viewある場合不要
　　  if($this->request->is('ajax')) {
            $img = $this->request->data['base64image'];
            $img = str_replace('data:image/jpeg;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img); //base64_decode() でバイナリに戻す
    $file = 'image.jpeg';
    $success = file_put_contents($file, $data);
        }
}

参考：http://stackoverflow.com/questions/1532993/i-have-a-base64-encoded-png-how-do-i-write-the-image-to-a-file-in-php

jQuery オブジェクトをDOM エレメントに変換

jQuery オブジェクトの[0]はDOMです。

var dom_element = jq_obj[0];

JQuery id セレクタに変数と配列を使う場合

document.getElementById( "caseFrame" ).innerHTML += '<div class = "drag" style="display:inline-block"><img id="upload-pic[' + memory_file_counter +　']" src="' + dataUri + '"></div>' ;

ここで[0]みたいようなidを指定する必要があります。
var resizeId = '#upload-pic\\[' + memory_file_counter + '\\]';
$(resizeId).resizable();

\\で[や]など特殊文字を変換、+で変数を入れる。

jquery attr error

下記のコマンドを実行したら、エラーになった。

upload_pic = $('[name^=upload-pic]');
var attr_style = upload_pic[0].attr('style');
console.log(attr_style);

Uncaught TypeError: upload_pic[0].attr is not a function

調べてみたら、upload_pic[0]はplain DOM elementsのため、.attrを使うには、 jQuery objectに変換する必要があります。
var attr_style = $(upload_pic[0]).attr('style');