现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头像需要正方形,这样做难免出现异性,显示的时候便是各种丑。

   项目赶完之后这两天优化本想在网上找一个现成的图片裁剪插件使用,但是在百度上面和jq22上面找了半天找到的都是一些服务器裁剪的事例,加上看别人的代码各种麻烦,简直头大,最后发现一个本地图片处理的插件,便想着不如自己写一个,虽然代码写着乱,但是自己乱写的也比别人好好写的更容易懂不是。哈哈

  cropper插件详细api可参考以下链接 cropper本地图片裁剪插件

  构建html结构

  

<div id="content">
<form id="NewQyq">
<div class="SeeCont">
<p><span style="color: red;">*</span>选择图片:</p>
<div class="SeeImg image_container">
<img class="myimg" src='' />
</div>
<button class="TxText xzBtn" id="imgReplaceBtn" type="button">更换图片 </button>
<br />
base64地址:<input name="url" id="imgShowurlbase" style="width: 400px;" value="f12打开控制台查看" />
<br />
七牛云地址: <input name="url" id="imgShowurl" style="width: 400px;" />
</div>
</form>
</div>

  创建函数

function upImg(bili){
$("#imgReplaceBtn").on("click",function(){
$("body").prepend('<div class="parsetcroBox" >'
+'<div class="cropperBox">'
+'<h4 class="boxH4" >图片裁剪 <a class="imgBoxBtn">选择图片 <input type="file" class="file_upload" /></a> </h4>'
+'<hr />'
+'<div class="imgBox"><img id="preview" src="" /></div>'
+'<div class="imgBoxyulan"><img id="previewyulan" src="" /></div>'
+'<div class="bottomBox">'
+'<button class="imgBoxBtn queding">确定</button>'
+'<button class="imgBoxBtn xuanzhuan">旋转</button>'
+'</div>'
+' </button>'
+'</div>'
+'</div>')
})
}

  选择图片之后,将选择的图片显示在裁剪区域,引入cropperjs包,实例化图片裁剪方法

var upImgageToken=''
$("body").on("change",".file_upload",function(){
var $file = $(this);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#preview");
if(fileObj && fileObj.files && fileObj.files[0]){
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$img.attr('src',dataURL);
}else{
dataURL = $file.val();
var imgObj = document.getElementById("preview");
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL; }
$img.cropper({
aspectRatio: bili , //1 / 1, //图片比例,1:1
crop: function(data) {
var $imgData=$img.cropper('getCroppedCanvas')
var dataurl = $imgData.toDataURL('image/png');
$("#previewyulan").attr("src",dataurl)
},
built: function (e) {
}
});
console.log(dataURL)
$img.cropper('replace',dataURL)
$(".xuanzhuan").on("click",function(){
$img.cropper('rotate', 90) //图片旋转
}) $("body").unbind("click").on("click",".queding",function(){ var $imgData=$img.cropper('getCroppedCanvas')
var dataurl = $imgData.toDataURL('image/png'); //dataurl便是base64图片
console.log(dataurl)
$(".myimg").attr("src",dataurl)
$(".parsetcroBox").remove()
imgReplaceBtn=1
//下面两种方法需要用到那种使用哪种即可,或者都不使用直接上传base64文件给后台即可,哈哈
//putb64(dataurl) //上传base64图片上传至七牛云方法,需要先获取到后台生成的上传token
//blob = dataURLtoBlob(dataurl); //将base64图片转化为blob文件方法
}) });

  上面一个简单的本地裁剪获取base64图片便已经完成,看看代码,使用插件的情况下还是挺简单的,再次不得不说,cropper插件真的强大,强烈推荐使用。

  以上是将base64图片上传给后台,后台得到base64图片后还得处理一遍,由于前两天项目中做了将视频上传到七牛云存储空间让七牛给我们做处理,我便想将图片也传到七牛上去,得到图片链接之后直接传一个链接地址给后台存储岂不是要简单许多。

  终于在七牛摸个旮旯找到了七牛云上传base64图片的文档   七牛云上传base64图片sdk  上传base图片要比视屏处理要简单不少,不需要引用需要js,直接使用就行,根据官方jdk改了一下如下:

 function putb64(picBase){   //七牛云官方文档方法
/*picUrl用来存储返回来的url*/
var picUrl;
/*把头部的data:image/png;base64,去掉。(注意:base64后面的逗号也去掉)*/
picBase=picBase.substring(22);
/*通过base64编码字符流计算文件流大小函数*/
function fileSize(str) {
var fileSize;
if(str.indexOf('=')>0) {
var indexOf=str.indexOf('=');
str=str.substring(0,indexOf);//把末尾的’=‘号去掉
}
fileSize=parseInt(str.length-(str.length/8)*2);
return fileSize;
}
/*把字符串转换成json*/
function strToJson(str) {
var json = eval('(' + str + ')');
return json;
}
//http://upload-z2.qiniu.com/putb64/ 只适用于七牛云华南空间 因为我的是七牛云华南空间,如果不是华南空间需要根据七牛云文档进行更改
var url = "http://upload-z2.qiniu.com/putb64/"+fileSize(picBase);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState==4){
var keyText=xhr.responseText;
/*返回的key是字符串,需要装换成json*/
keyText=strToJson(keyText);
/* http://image.haoqiure.com/ 是我的七牛云空间网址,keyText.key 是返回的图片文件名*/
picUrl="http://image.haoqiure.com/"+keyText.key;
console.log(picUrl);
$("#imgShowurl").val(picUrl) //将图片链接显示在输入框去
}
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", "UpToken "+upImgageToken+"");
xhr.send(picBase);
}

  使用七牛云有好处,但是需要后台配置不少参数,本人对于后台不懂,就不说了

  但是如果没有使用七牛云的朋友又该怎么办,我们可以将base64图片转换成blob文件,百度上方法很多,我就随便找了一种,如下:

function dataURLtoBlob(dataurl) {  //将base64格式图片转换为文件形式
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}

  最后,在页面调用函数并传递需要裁剪的图片比例即可,如下:

upImg(1/1)  //裁剪1:1比例的图片

流程可见如下: 

完整dome    随便百度搞得,也算不上是插件吧,裁剪面板也还有许多功能没有完善,不过参考cropperjs api 自己想要什么功能加上就行啦,自己能用就行了,代码比较渣,乱,大神们轻喷,毕竟才入门不久0.0....

利用cropper插件裁剪本地图片,然后将裁剪过后的base64图片上传至七牛云空间的更多相关文章

  1. Chrome插件-把网页图片上传到七牛空间一

    功能:图片上右键,点击上传图片到七牛,把图片上传的指定空间并返回图片URL. Chrome插件本质就是js代码,但是里面有一些限制,比如事件绑定等和普通js的绑定是有区别的,主要是为了安全性考虑. 做 ...

  2. KindEditor图片上传到七牛云

    自己做了一个网站,编辑器用的是KindEditor,平时会涉及到KindEditor自带的图片上传,但是服务器用的是虚拟主机,没多少空间,就一直想着把图片放在免费的云存储空间,之前看KindEdito ...

  3. vue图片上传到七牛云

    代码: <template> <div class="upload-info"> <div> <el-upload class=" ...

  4. 图片上传到七牛云/阿里云的OSS

    1.准备 七牛云/阿里云OSS https://github.com/pfinal/storage 2.composer安装包 安装 composer require pfinal/storage 本 ...

  5. django + ckeditor + 七牛云,图片上传到七牛云

    传送门 本人使用的是 Django 的自带的管理后台,安装 ckeditor 富文本编辑器后,上传图片的时候直接传到七牛云的.

  6. laravel上传到七牛图片插件

    1.首先引入两个插件 2.在https://developer.qiniu.com/kodo/sdk/1241/php找到安装命令 在终端运行composer require qiniu/php-sd ...

  7. 使用PHP把图片上传到七牛

    先从官网下载SDK,然后新建一个文件,里面包括上传,下载,删除 <?php header("Content-Type:text/html; charset=utf8"); r ...

  8. Python 进行 SSH 操作,实现本地与服务器的链接,进行文件的上传和下载

    Python 进行 SSH 操作,实现本地与服务器的链接,进行文件的上传和下载 2018年5月26日 19:03 阅读 375 评论 7 我本地和服务器的连接一直使用的是 Xshell 5,而在与服务 ...

  9. markown编辑器截图粘贴预览,并将图片传至七牛云

    最近在做一个项目,需要实现类似QQ截图后,就是能够在富文本编辑器中粘贴截图并预览. 先看一下效果: 分析一下实现步骤: QQ截图后在编辑器中粘贴,肯定会有一个粘贴事件,即 paste 事件 在事件回调 ...

随机推荐

  1. Html+css 练习写页面发现的错误及解决办法。

    最近开始模仿写一些静态页面,今天模仿的是中华咨询网.写了一个简单的js(功能:当鼠标hover一级菜单的时候,设置二级菜单为显示,当鼠标hover二级菜单的选项时候,二级菜单不收回.当鼠标移出菜单一级 ...

  2. Win7局域网文件共享方法

      右击桌面网络----属性----更改高级共享设置 (注释:查看当前网络 比如:家庭网络.公共网络 等!) "我这里为公共网络"   选择 公共网络---选择以下选项:启动网络发 ...

  3. laravel named route

    laravel中一般对于路由的使用方法是在routes.php中定义一个路由,在view中如果要引用一个url则直接通过<a href="url/">来使用. 但是随着 ...

  4. 12、SQL Server 行列转换

    SQL Server 行转列 在SQL Server 2005中PIVOT 用于将列值转换为列名(行转列),在SQL Server 2000中是没有这个关键字的 只能用case语句实现. --创建测试 ...

  5. 《Effective Objective-C 2.0》摘要

    前一段时间将<Effective Objective-C 2.0>这本书浏览了一遍,说一下几个觉得比较有意思的知识点. 感觉这本书是ios开发必看的一本书,最基础的,以及稍微高阶一点的oc ...

  6. Thinkphp5笔记三:创建基类

    做项目之前,一定要先部署要自己的"基类",非常的重要.打个比方,要访问会员中心相关的控制器,这类控制器是不是都要有一个“登录限制”,才让访问会员相关的控制器? 一.创建三大基类 原 ...

  7. 1116: [POI2008]CLO

    1116: [POI2008]CLO https://lydsy.com/JudgeOnline/problem.php?id=1116 分析: 单独考虑每个联通块的情况. 设这个联通块里有n个点,那 ...

  8. 可编辑表格(Editable Table)

    需求分析 1.单击table的每个cell后,给cell加上一个尺寸相当的input; 2.input后把value传给cell的innerHTML; 3.失焦后删除input. HTML <! ...

  9. Apache Lucene初探

    讲解之前,先来分享一些资料 首先,学习任何一门新的亦或是旧的开源技术,百度其中一二是最简单的办法,先了解其中的大概,思想等等.这里就贡献一个讲解很到位的ppt 这是Lucene4.0的官网文档:htt ...

  10. Oracle冷备份和热备份的实践(原创)

    参考本博转发的备份博文和上传的文件,进行了冷热备份实践并进行了记载以备以后查阅,本次实践的环境是win10,安装了oracle11g 一.冷备份 1.cmd->sqlplus /nolog 2. ...