天下无不散之筵席，所以我一直感觉都很“坚强”，朋友，见到你就是缘分，QQ：85951258 By kui
(09.07.20)我的后台生成系统生成的界面预览【抢先预览】
作者:wbkt2t 日期:2009-06-23
兼容firefox的给每一个onClick再附加一个事件
作者:wbkt2t 日期:2012-03-27
store.js
作者:wbkt2t 日期:2012-03-15
store.js 是一个实现了浏览器的本地存储的 JavaScript 封装 API，不是通过 Cookie 和 Flash 技术实现，而是使用 localStorage、globalStorage 和 userData 行为。
示例代码：
.net网站发布只生成一个dll的方法
作者:wbkt2t 日期:2011-10-15
QQ开发平台-笔记1
作者:wbkt2t 日期:2011-08-25
Picnic API
作者:wbkt2t 日期:2011-08-06
Picnic API
_apikey: 网站获取的key
（任何参数都是以下划线开头，如果不以下划线开头的参数，将会发送会website）
GET 或者 POST
可以使用get或者post方式发送输入。如：
<a href="http://www.picnik.com/service/?_apikey=YourApiKey">Go!</a>
<form action="http://www.picnik.com/service/">
<input type="hidden" name="_apikey" value="YourApiKey"/>
<input type="submit" value="Go!"/>
</form>
如果使用get方式，参数的长度不能超过2083个字符。
使用get方式，需要encode参数的值。可以使用javascript的encodeURIComponent()方法
http://www.w3schools.com/jsref/jsref_encodeURIComponent.asp
简单例子：
l _apikey: Picnic 提供的key，如果没有，可能通过这里http://www.picnik.com/keys/request获得
l _import: 提供给picnic编辑的图片路径
如果发送图片到picnic
有3种方式发送图片到picnic
1. 通过get方式发送_import参数
2. 通过post方式发送_import参数
3. 通过post发送image data过去，form的值需要是multi-part
#1通过get方式发送_import参数
通过_import直接发送，如
http://www.picnik.com/service/?_import=http%3A//example.com/image.jpg&_apikey="YourApiYou"
也可以通过变量定义进行发送，如:
http://www.picnik.com/service/?_import=img&img=http%3A//example.com/image.jpg&_apikey="YourApiKey"
#2通过post方式发送_import参数
Post发送和get方式类型，如：
<form action="http://www.picnik.com/service/" method="POST">
<input type="hidden" name="_apikey" value="YourApiKey"/>
<input type="hidden" name="_import" value="http://example.com/image.jpg"/>
<input type="hidden" name="_export" value=" a.ashx"/>
<input type="submit" value="Import!"/>
</form>
或者
<form action="http://www.picnik.com/service/" method="POST">
<input type="hidden" name="_apikey" value="YourApiKey"/>
<input type="hidden" name="_import" value="img"/>
<input type="hidden" name="_export" value=" a.ashx"/>
<input type="hidden" name="img" value="http://example.com/image.jpg"/>
<input type="submit" value="Import!"/>
</form>
#3通过post发送image data过去，form的值需要是multi-part
<form
action="http://www.picnik.com/service/"
method="POST"
enctype="multipart/form-data">
<input type="hidden" name="_apikey" value="YourApiKey"/>
<input type="hidden" name="_import" value="imagedata"/>
<input type="file" name="imagedata" />
<input type="submit" value="Import!"/>
</form>
Imagedata:后台接受的字段名
自定义保存按钮
通过参数_export_title可自定义保存按钮的文本，如_export_title=abcd_Save
按钮文本不支持中文
如果保持图片
发送数据的时候，需要提供_export参数，该值就是picnic 回调的页面。编辑完成后立即运行_export所提供的地址。
有2种方式保持图片，Push 和 Pull 方法
#1Push 方法
Push方法，picnic会把图片以数据流的方式发送给回调页面。
这种方式，picnic会调用2次回调页面。第一次，把图片以数据流的方式发送给回调页面，处理完毕后，再一次以get方式直接运行_export提供的回调页面。
如果你想第二次运行的页面有所不同，可以使用_redirect参数。如果提供了_redirect参数，那么picnic第一次回post数据流给_export,执行完后，会直接运行_redirect提供的地址.
数据流的默认字段名是”file”,可以通过_export_field参数来改变默认参数名
#2Pull方法
Pull方法，picnic会把图片以地址栏的形式发送给回调页面。
如何使用Pull方法：只需要提供_export_agent=browser到地址栏即可
如：
<a href="http://www.picnik.com/service/?_apikey=831a9aacd413c4abce38f2e841b4cd78&_import=http://cn.abcd.com/shenzhen/html/zh-cn/images/88tuangou.jpg&_export=http://dev.abcd.com/hk/darrentest/a.ashx&_export_title=abcd_Save&_export_agent=browser">Go!</a>
深入了解保持图片方法
_imageid:这个参数可以用来控制是否重写图片。发送到picnic的时候提供这个参数，当用户编辑成功返回的时候，会把之前发送过来的_imageid的值原封发回给_export参数提供的页面。可以通过有没有_imageid来判断是否要重写图片，如果_imageid有值，可以删除原图保存新图，如果_imageid没有值，可以认为没有原图，直接新建新图。
但是，只有提供了_replace后，_imageid才会判断是否提供值回调给页面。
_replace 有4个可选值：
1. no ：回调页面不会有_imageid的值
2. yes ：回调页面有_imageid的值
3. ask: 当用户编辑完成后，会提供一个询问对话框。
点击“替代”会把_imageid的值回调给页面
点击“保存为新副本”不会把_imageid的值回调给页面
点击“取消”关闭对话框
4. confirm: 会告诉用户图片将会被替换，是否替换，如图对话框
点击“替代”会把_imageid的值回调给页面
点击“取消”关闭对话框
另外还有个可选参数：_original_thumb
_orginal_thumb提供一张原始图片，用来给提示对话框显示对比使用，高宽最大240*240
如果，提供了_orginal_thumb参数，提示对话框表现为：
完整例子：
<form
action="http://www.picnik.com/service/"
method="POST"
enctype="multipart/form-data">
<input type="hidden" name="_apikey" value="831a9aacd413c4abce38f2e841b4cd78"/>
<input type="hidden" name="_import" value="file"/>
<input type="hidden" name="_export_title" value="abcd_Save"/>
<input type="hidden" name="darren" value="wubing"/>
<input type="hidden" name="_imageid" value="841180001"/>
<input type="hidden" name="_replace" value="confirm"/>
<input type="hidden" name="_export" value=" a.ashx"/>
<input type="hidden" name="_original_thumb" value="images/88tuangou.jpg"/>
<input type="hidden" name="_export_agent" value="browser"/>
<input type="file" name="file" />
<input type="submit" value="Import!"/>
</form>
页面参数设置
_exclude:可以排除picnic提供的不需要的tab。_exclude提供的值有
1. in: “Library 相片库” tab
2. edit: “Edit 编辑” tab
3. create :” Create 创建” tab
4. out: “Save & Share 保存与分享” tab
排除多个值请用逗号(,)隔开
_close_target : 添加关闭按钮
自定义tab标签
可以通过参数定义打开tab所用的标签。
_page: 定义第一次打开picnic所处的页面。默认值是/home/welcome/。如果有提供_import参数，则默认值是/edit
_default_in: 设置 “Library相片库”的默认子标签，默认是 “upload”
_default_out: 设置 “Save & Share 保存与分享”的默认子标签，默认是 “download”
使用弹出框方式编辑图片
第一步：下载一下文件
第二步：引入所需文件
<link rel="stylesheet" href="picnikbox_2_0.css" media="screen" type="text/css" />
<script type="text/javascript" src="picnikbox_2_0.js"></script>
第三部：给<a>添加class=”pbox”
如：
<a href="http://www.picnik.com/service/?_apikey=831a9aacd413c4abce38f2e841b4cd78&_import=http://cn.abcd.com/shenzhen/html/zh-cn/images/88tuangou.jpg&_export=http://dev.abcd.com/hk/darrentest/a.ashx&_export_title=abcd_Save&_export_agent=browser" class="pbox">Go!</a>
完成
主要方法事件：
PicnikBox.SetPicnikMargin(150); //设置弹出框的margin
PicnikBox.SetOverlayMargin(50); //设置遮盖层的margin
PicnikBox.SetPicnikBorder( 3, "solid", "#f00" ); //设置弹出框的边框
PicnikBox.SetOverlayBorder( 3, "solid", "#0f0" ); //设置遮盖层的边框
PicnikBox.SetActivateCallback( onPicnikActivate ); //弹出前事件
PicnikBox.SetDeactivateCallback( onPicnikDeactivate ) //关闭事件
实例:
<script type="text/javascript">
var strOldTitle = document.title;
function onPicnikActivate( elLink ) {
document.title = "a";
// on activate, if it's our special link, change things!
if (elLink.id == "picnik_activate_sample") {
// we set the top overlay margin to 300 so that Picnik only covers the bottom
// portion of the screen. Also give it some funky borders and change the title.
PicnikBox.SetOverlayMargins( 300, 0, 0, 0 );
PicnikBox.SetOverlayBorders( 6, 0, 0, 0, "dotted", "#888" );
PicnikBox.SetPicnikMargin( 50 );
PicnikBox.SetPicnikBorder( 6, "inset", "#BCA" );
document.title = "Picnik is Running!"; // also change the title (just for fun)
} else {
// We want to emphasize that the original website is still in the background,
// so we set the margins really wide (150). You'll probably want to leave this
// number closer to its default (20). All the other settings are defaults.
PicnikBox.SetPicnikMargin(150); //设置弹出框的margin
PicnikBox.SetOverlayMargin(50); //设置遮盖层的margin
PicnikBox.SetPicnikBorder( 3, "solid", "#f00" ); //设置弹出框的边框
PicnikBox.SetOverlayBorder( 3, "solid", "#0f0" ); //设置遮盖层的边框
}
}
function onPicnikDeactivate( elLink ) {
document.title = strOldTitle; // restore the title
}
PicnikBox.SetActivateCallback( onPicnikActivate ); //弹出前事件
PicnikBox.SetDeactivateCallback( onPicnikDeactivate ) //关闭事件
</script>
