七牛、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>
目录
相关文章
|
2月前
|
前端开发 JavaScript 开发工具
使用jsDelivr和GitHub,上传本地静态资源到免费CDN
本文介绍了一种将本地图片和静态资源(如 js、css、文档等)上传至免费CDN的方法,便于随时调用。具体步骤包括:在GitHub创建仓库`resources`存放资源;通过上传或Git命令同步文件;在仓库中创建新版本并发布。之后即可通过指定格式的URL访问这些CDN资源。此方法简单高效,适合开发者快速部署和共享静态内容。
使用jsDelivr和GitHub,上传本地静态资源到免费CDN
|
5月前
|
移动开发 前端开发 PHP
简单了解下UEditor的使用
简单了解下UEditor的使用
48 0
|
对象存储
从零玩转文件上传之七牛云1
从零玩转文件上传之七牛云
115 0
|
缓存 网络安全 对象存储
从零玩转文件上传之七牛云2
从零玩转文件上传之七牛云
80 0
|
前端开发 JavaScript
前端上传图片到七牛云
前端上传图片到七牛云
292 0
|
前端开发
ueditor 百度富文本编辑器后端配置(上传图片)
ueditor 百度富文本编辑器后端配置(上传图片)
435 0
|
JavaScript 前端开发
nodejs接入七牛云并实现图片上传
nodejs接入七牛云并实现图片上传
|
Android开发
autojs七牛云上传文件
牙叔教程 简单易懂
331 0