七牛、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>
目录
相关文章
|
4月前
|
SQL 前端开发 JavaScript
使用ueditor实现多图片上传案例
使用ueditor实现多图片上传案例
|
4月前
UEditor配置后端上传图片
UEditor配置后端上传图片
116 0
UEditor配置后端上传图片
|
缓存 网络安全 对象存储
从零玩转文件上传之七牛云2
从零玩转文件上传之七牛云
75 0
|
对象存储
从零玩转文件上传之七牛云1
从零玩转文件上传之七牛云
110 0
|
前端开发 JavaScript
前端上传图片到七牛云
前端上传图片到七牛云
288 0
|
前端开发
ueditor 百度富文本编辑器后端配置(上传图片)
ueditor 百度富文本编辑器后端配置(上传图片)
430 0
|
JavaScript 前端开发
nodejs接入七牛云并实现图片上传
nodejs接入七牛云并实现图片上传
|
开发框架 前端开发 JavaScript
【前端】简单配置使用百度在线文本编辑器UEditor
在本篇文章中,我们讲一起了解下百度在线文本编辑器UEditor的简单配置使用 目前在线编辑器插件网上挺多的,个人觉得UEditor在UI和功能上还是不错的
951 0
|
Android开发
autojs七牛云上传文件
牙叔教程 简单易懂
330 0
|
存储 程序员 数据安全/隐私保护
【干货】给大家推荐一个好用的图床网站(极简图床+七牛云打造markdown利器)
【干货】给大家推荐一个好用的图床网站(极简图床+七牛云打造markdown利器)
906 0
【干货】给大家推荐一个好用的图床网站(极简图床+七牛云打造markdown利器)