现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头像需要正方形,这样做难免出现异性,显示的时候便是各种丑. 项目赶完之后这两天优化本想在网上找一个现成的图片裁剪插件使用,但是在百度上面和jq22上面找了半天找到的都是一些服务器裁剪的事例,加上看别人的代码各种麻烦,简直头大,最后发现一个本地图片处理的插件,便想着不如自己写一个,虽然代码写着乱,但是自…
HTML代码: <form class="layui-form" action="{{route('doctor.store')}}" method="post" enctype="multipart/form-data" style="width: 500px"> <div class="layui-form-item layui-form-text"> <…
功能:图片上右键,点击上传图片到七牛,把图片上传的指定空间并返回图片URL. Chrome插件本质就是js代码,但是里面有一些限制,比如事件绑定等和普通js的绑定是有区别的,主要是为了安全性考虑. 做的比较粗糙,但是已经可以满足我得基本需要了. 七牛的上传需要accessToken,左右要存储使用人的开发者秘钥,这里使用HTML5的本地存储都存在了本地,所以这个控件最好只在自己的电脑上使用,之后可以考虑把秘钥加密存储,最好的办法还是存在服务器上,用一个连接来获取token. 下面使用图片来说明一…
自己做了一个网站,编辑器用的是KindEditor,平时会涉及到KindEditor自带的图片上传,但是服务器用的是虚拟主机,没多少空间,就一直想着把图片放在免费的云存储空间,之前看KindEditor的源码和七牛的SDK看得云里雾里的,网上搜索又没有类似的解决方法,只好继续看源码自己搞了,弄了整整一个晚上,基本实现了,下面说说我的做法: 版本说明: KindEditor版本:4x 七牛SDK:7.x.x 后端脚本:PHP 先看一下七牛给出的表单模板,在这里file和token这两个表单项是必须…
代码: <template> <div class="upload-info"> <div> <el-upload class="upload-pic" :action="domain" :data="QiniuData" :on-remove="handleRemove" :on-error="uploadError" :on-success=…
1.准备 七牛云/阿里云OSS https://github.com/pfinal/storage 2.composer安装包 安装 composer require pfinal/storage 本地存储 Local 阿里云 AliOss 请先 composer require aliyuncs/oss-sdk-php 7牛存诸 Qiniu 请先 composer require qiniu/php-sdk Ftp 请先 composer league/flysystem 3.引入使用示例 <…
传送门 本人使用的是 Django 的自带的管理后台,安装 ckeditor 富文本编辑器后,上传图片的时候直接传到七牛云的.…
1.首先引入两个插件 2.在https://developer.qiniu.com/kodo/sdk/1241/php找到安装命令 在终端运行composer require qiniu/php-sdk 3.自定义一个全局辅助函数,首先在项目的Http文件夹中新建Helpers文件夹,里面新建一个文件,名字就叫qiniu.php,注意引入 // 引入鉴权类use Qiniu\Auth;// 引入上传类use Qiniu\Storage\UploadManager; 在composer.json里…
先从官网下载SDK,然后新建一个文件,里面包括上传,下载,删除 <?php header("Content-Type:text/html; charset=utf8"); require_once __DIR__ . './autoload.php'; // 引入鉴权类 use Qiniu\Auth; use Qiniu\Storage\BucketManager; // 引入上传类 use Qiniu\Storage\UploadManager; // 需要填写你的 Acces…
Python 进行 SSH 操作,实现本地与服务器的链接,进行文件的上传和下载 2018年5月26日 19:03 阅读 375 评论 7 我本地和服务器的连接一直使用的是 Xshell 5,而在与服务器进行文件操作的时候使用的是 Xshell 推荐安装的一个工具 Xftp 5,然而,昨天自己想着从服务器下载备份好的的数据库文件到本地的时候发现这个文件传输工具居然过期不能用了,好气啊!于是没办法(机智如我)只好用 Python 来实现 SSH 的连接,顺便从服务器批量下载一些文件,实现自动化. 项…
最近在做一个项目,需要实现类似QQ截图后,就是能够在富文本编辑器中粘贴截图并预览. 先看一下效果: 分析一下实现步骤: QQ截图后在编辑器中粘贴,肯定会有一个粘贴事件,即 paste 事件 在事件回调函数中对前端进行图片的一次压缩 前端压缩多是使用canvas,返回的是base64,这里我使用了一个 localResizeIMG.js的插件 将生成好的base64传给后台,后台可以进行图片的第二次压缩,但是感觉没必要 后台先得到七牛云的upToken,即一个上传的凭证,然后执行七牛sdk提供的上…
对于很多新手来说,实现上传图片并且预览功能,都会感到不知所可,然后开始在网站搜索各种各样的图片上传预览插件,但是有的时候我们只是想简单的实现判断格式,以及预览的功能,使用插件的话,会使得项目的资源空间很大,代码臃肿. 下面,我就整理一个小方法实现判断上传格式,大小,以及预览图片的功能,大大的减少了代码量. 思路:点击上传按钮(id="PhotoFile"),选择文件,触发改变事件,调用base64data函数,调用完毕后,执行回调函数,把返回的base64数据分别赋值到img标签的sr…
接口(get请求.post请求 --json), 图片.歌曲下载(context),网页返回(text),上传文件   import requests################################接口返回json类型数据###############################带参数get请求url='http://118.24.3.40/api/user/stu_info'params={'stu_name':'小黑'} res=requests.get(url=url,…
工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本 其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点: 1. IE input type=file的图片预览要用IE的filter css progid:DXImageTransform.Microsoft.AlphaImageLoader chrome/firefox则用File api的file reader 2. 图片旋转,IE用progid:DXImageTransform.Microsoft.Matr…
一.本地新建Maven项目并启动成功 1. 按照IDEA提供的模板,构建一个maven webapp的模板项目. 一路Next,到最后的finish.如下图. 2. 新建Tomcat,启动刚建立的项目. (无需管太多,Tomcat会自行启动) 3. 启动成功 启动项目,浏览器出现如下,表示启动成功. 二.IDEA安装和配置Git,配置GitHub账号 步骤总结: 1. 本地安装Git 2. IDEA配置Git 3. IDEA配置GitHub账号 图示如下: 三.IDEA本地项目与GitHub 3…
富文本编辑框,选择UEditor 下载地址:http://ueditor.baidu.com/website/download.html 使用说明:http://fex.baidu.com/ueditor/ 使用 下载下来过后,将指定的几个文件和文件夹拷贝到项目static下 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g…
1.上传组件(可上传多个文件) <template> <div class="attachmentN"> <span class="btnSpan" v-show="operationType<2" :title="btnName" :class="{'active': showButton === false}"> <a id="btnName&q…
基本过程 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. 2) 在image对象的 onload 事件中, 通过 canvas 的 canvas.getContext('2d') 的 drawImage 方法, 将Image 改变大小绘制到canvas上. 3) 通过 canvas.toDataURL("image/jpeg", 0.1); 方法, 将图片变成base6…
1.效果展示 2.html 代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="./upload.js"&g…
function convertBase64UrlToBlob(urlData){ var bytes=window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte //处理异常,将ascii码小于0的转换为大于0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] =…
//上传文件 function UploadFile(el) { var dataValue = $(el).attr("data-id"); var ele = dataValue.toLowerCase(); var f = document.getElementById('uploadFile_'+ele).files[0] var src = window.URL.createObjectURL(f); document.getElementById('uploadPrevie…
在搭建个人博客时,大家都会买一台云服务器.可是图片的存放一直是一个问题,冷月帮大家找到一个免费的第三方平台对象存储-七牛云.大家可以把图片上传到七牛云的对象存储,大大节约服务器的压力. 首先,大家在使用七牛云的对象存储必须到官网上申请一个账号,并且实名认证.七牛云官网 进入个人中心,点击秘钥管理.记住你的AK和SK. 创建一个对象存储实例,记住自己的实例名字和测试域名. 在php项目里,利用composer工具安装七牛云的sdk. composer require qiniu/php-sdk 安…
之前有写过一篇文章,基于asp.net mvc 封装 Web Uploader 上传插件: http://www.cnblogs.com/vanteking/p/5623682.html 已经实现的功能有: 封装 my97datepicker 日历插件 : @Html.Calendar("time") 封装 ckeditor编辑器: @Html.RichTextEditor("CKEDITOR1", new RichTextEditor { Height = 300…
(一)七牛云平台的图片瘦身功能简介:(引用自官网) 针对jpeg.png格式图片 瘦身后分辨率不变,格式不变. 肉眼画质不变. 图片体积大幅减少,节省 CDN 流量 官网给的图片压缩率很高,官网给的「葡萄」图片瘦身在不改变分辨率和格式的情况下压缩率为65.49%,我自己测试了一张小图在后文中会有,原来的大小在「22kb」压缩后为「18kb」,据一般情况来看,压缩率虽然没有官网给的那么夸张,但是也能基本达到80%左右,所以这个压缩率还是很不错的. (二)需求分析 我们可以设想几个场景 『1:当你在…
最新下载地址: https://github.com/widuu/qiniu_ueditor_1.4.3 Ueditor七牛云存储版本 注意事项 老版本请查看 : https://github.com/widuu/qiniu_ueditor_1.4.3/tree/v1.0.0 关于地址报错 请修改 php/config.json 中的 uploadQiniuUrl 和 ChunkUploadQiniuUrl 参数,因为最近反馈地区错误报错比较多,举个简单的例子华南地区修改如下 "uploadQi…
由于工作需要,要使用第三方存储作为图床,发现七牛云挺不错,又可以免费使用10G的空间,决定先试试. 项目中使用的是Kindeditor作为网页编辑器的,七牛云的插件里没有现成的Kindeditor的插件,开始是想看着官方提供的手册,自己开发下,结果不知道是我太笨还是手册太高深,结果愣是没看懂,后来迫于工作进度,差点决定要放弃Kindeditor使用Ueditor,毕竟有现成的插件可用,不过迫于对Kindeditor的热衷,最后还是坚持下来了,尽管没找到Kindeditor上传到七牛云的太多资料,…
前言 这只是个暂行的办法,回头研究好七牛云的base64上传或者vue的文件上传后还是要进行更改的 想法是这样的,既然前端只能穿base64的那就传base64的然后转为文件上传到七牛云后再删除 本地的文件. 代码 后缀统一定死了,这个是可以写活的,想写活的话就再传个文件名称就好了,通过php的获取文件信息函数或者截取函数都是可以实现获得后缀的,因为这个方法只是暂行的后面还会修改,所以我就先写死了 <?php namespace app\api\controller; use think\Db;…
七牛云注册 https://www.qiniu.com/ 实名认证成功之后,赠送10G存储空间 复制粘贴AK和SK 创建存储空间,填写空间名称,选择存储区域.访问控制选择位公开空间 获取测试域名 七牛云使用 前端功能实现 随便写个button,然后写个js 关联上就行 js代码 // ================== 上传至七牛(云存储平台) ================ let $progressBar = $(".progress-bar"); QINIU.upload({…
其实和vue关系不大,和我们之前做上传压缩性质是一样的 当然下面的代码是没有处理ios横屏拍照的bug的 有兴趣的可以多搜一下  网上都有相应的解答 .. var that = this if (e.target.files[0]) { var file = e.target.files[0] var reader = new FileReader() reader.readAsDataURL(file) reader.onload = function() { img.src = this.r…
一,通过composer 下载七牛云 sdk composer require qiniu/php-sdk 二,手动下载七牛云sdk 1,https://developer.qiniu.com/kodo/sdk/1241/php  在这链接里面下载PHP 的sdk文件夹 2,解压放在 vendor 文件夹下面 3,前端通过layui 向后端发起请求 4,后端数据的处理 5,以下是上传图片到七牛云的  前端和后端的源码 前端: layui.use('upload', function () { v…