七牛、JQery JCrop、Ueditor结合

简介: 七牛、JQery JCrop、Ueditor结合
  1. 七牛
  1. http://developer.qiniu.com/
  1. ueditor和七牛结合
  1. http://www.sxt.cn/info-4774-u-756.html(参考地址)
  2. http://www.w3cfuns.com/article-1310-2.html
  1. Jquery Jcrop
  1. 杠杠 jsp/ImageCrop.jsp
  2. http://www.jb51.net/article/18273.htm(参考地址)
  3. 代码 <html>
       <head>
           <script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script>
           <script src="http://img.jb51.net/jslib/jquery/jquery.jcrop.min.js"></script>
    <style type="text/css">
           body{
               margin:100px auto;
               text-align:center;
           }
           .jcrop-holder {
               text-align: left;
           }
           .jcrop-vline, .jcrop-hline{
               font-size: 0;
               position: absolute;
               background: white url('http://img.jb51.net/jslib/images/Jcrop.gif') top left repeat;
           }
           .jcrop-vline {
               height: 100%;
               width: 1px !important;
           }
           .jcrop-hline {
               width: 100%;
               height: 1px !important;
           }
           .jcrop-handle {
               font-size: 1px;
               width: 7px !important;
               height: 7px !important;
               border: 1px #eee solid;
               background-color: #333;
               *width: 9px;
               *height: 9px;
           }
           
           .jcrop-tracker {
               width: 100%;
               height: 100%;
           }
           
           .custom .jcrop-vline,.custom .jcrop-hline{
               background: yellow;
           }
           .custom .jcrop-handle{
               border-color: black;
               background-color: #C7BB00;
               -moz-border-radius: 3px;
               -webkit-border-radius: 3px;
           }
           </style>
           <script language="Javascript">
           jQuery(function(){
               jQuery('#cropbox').Jcrop();
           });
           </script>
       </head>
       <body>
               <img src="http://img.jb51.net/jslib/images/flowers.jpg" id="cropbox" />

    <a href="http://www.jb51.net/">脚本之家</a>
       </body>
    </html>
目录
相关文章
|
6月前
|
SQL 前端开发 JavaScript
使用ueditor实现多图片上传案例
使用ueditor实现多图片上传案例
|
6月前
UEditor配置后端上传图片
UEditor配置后端上传图片
130 0
UEditor配置后端上传图片
|
JavaScript
JS 网易严选输入框的制作
JS 网易严选输入框的制作
86 0
|
前端开发 JavaScript
前端上传图片到七牛云
前端上传图片到七牛云
314 0
|
前端开发
ueditor 百度富文本编辑器后端配置(上传图片)
ueditor 百度富文本编辑器后端配置(上传图片)
465 0
|
JavaScript 前端开发
nodejs接入七牛云并实现图片上传
nodejs接入七牛云并实现图片上传
|
Android开发
autojs七牛云上传文件
牙叔教程 简单易懂
346 0
|
存储 程序员 数据安全/隐私保护
【干货】给大家推荐一个好用的图床网站(极简图床+七牛云打造markdown利器)
【干货】给大家推荐一个好用的图床网站(极简图床+七牛云打造markdown利器)
925 0
【干货】给大家推荐一个好用的图床网站(极简图床+七牛云打造markdown利器)
|
Java 应用服务中间件 nginx
百度编辑器(ueditor)不支持上传图片到独立服务器?
百度编辑器(ueditor)不支持上传图片到独立服务器?http://www.bieryun.com/1596.html 项目用到了百度编辑器,感觉很高大上,突然发现这货上传的图片时,它总会放到当前项目的目录下,它的配置文件config.json 这里这个imagePathFormat就是保存路径了,它会默认在这个路径前面拼上一个根目录,所以你传的文件都被放在根目录下。
2814 0