七牛、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>
目录
相关文章
|
对象存储 容器
Typora配置阿里云OSS作为图床上传图片
Typora配置阿里云OSS作为图床上传图片
820 0
|
6月前
|
存储 开发框架 JavaScript
程序与技术分享:CKEditor与CKFinder使用
程序与技术分享:CKEditor与CKFinder使用
184 0
|
7月前
|
移动开发 前端开发 PHP
简单了解下UEditor的使用
简单了解下UEditor的使用
70 0
|
7月前
UEditor配置后端上传图片
UEditor配置后端上传图片
136 0
UEditor配置后端上传图片
|
Java 应用服务中间件 对象存储
富文本编辑器Ueditor实战(二)-图片上传
本文重点阐述了如何扩展Ueditor的图片上传功能,以及在实际中,如何根据项目实际情况,设置图片信息的动态展示思路。
906 0
富文本编辑器Ueditor实战(二)-图片上传
|
前端开发 JavaScript
前端上传图片到七牛云
前端上传图片到七牛云
334 0
|
前端开发
ueditor 百度富文本编辑器后端配置(上传图片)
ueditor 百度富文本编辑器后端配置(上传图片)
509 0
|
存储 编译器 对象存储
Typora+PicGo+阿里云OSS搭建博客图床
Typora+PicGo+阿里云OSS搭建博客图床
384 0
|
JavaScript 前端开发
nodejs接入七牛云并实现图片上传
nodejs接入七牛云并实现图片上传
|
Android开发
autojs七牛云上传文件
牙叔教程 简单易懂
357 0