上传图片前裁剪
程序员文章站
2022-03-02 12:48:12
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像裁剪-Jcrop</title>
<link rel="stylesheet" href="jquery.Jcrop.min.css" type="text/css" />
<style>
img {
border: 0;
}
* {
margin: 0;
padding: 0;
}
.head {
display: inline-block;
width: auto;
height: auto;
}
#target{
max-width: 600px;
}
canvas {
position: fixed;
top: 400px;
right: 0;
border: 1px solid red;
width: 340px;
height: 208px;
}
#myCan{
display: none;
}
</style>
</head>
<body>
<!-- 头像 -->
<div class="head" >
<img src="" id="target" />
<input type="file" id="file" onchange="changeFile()" style="display: none;"/>
</div>
<img src="" class="chang" alt="">
<button onClick="openBrowse()">上传图片</button>
<button onClick="uploadFile()">确认</button>
<!-- 画板 -->
<canvas id="myCan" width="340" height="208"></canvas>
<script src="jquery.min.js"></script>
<script src="jquery.Jcrop.min.js"></script>
<script type="text/javascript">
// 定义一些使用的变量
var jcrop_api,//jcrop对象
boundx,//图片实际显示宽度
boundy,//图片实际显示高度
realWidth,// 真实图片宽度
realHeight, //真实图片高度
// 使用的jquery对象
$target = $('#target'),
xsize = 170,
ysize = 104;
//1、打开浏览器
function openBrowse(){
var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false;
if(ie){
document.getElementById("file").click();
}else{
var a=document.createEvent("MouseEvents");
a.initEvent("click", true, true);
document.getElementById("file").dispatchEvent(a);
}
}
//2、从 file 域获取 本地图片 url
function getFileUrl(sourceId) {
var url;
if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
url = document.getElementById(sourceId).value;
} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
} else if(navigator.userAgent.indexOf("Safari")>0) { // Chrome
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
return url;
}
//选择文件事件
function changeFile() {
var url = getFileUrl("file");//根据id获取文件路径
preImg(url);
return false;
}
//3、将本地图片 显示到浏览器上
function preImg(url) {
console.log('url===' + url);
//图片裁剪逻辑
if(jcrop_api){//判断jcrop_api是否被初始化过
jcrop_api.destroy();
console.log(jcrop_api);
}
//初始化图片
initTarget();
var image = document.getElementById('target');
image.onload=function(){//图片加载是一个异步的过程
//获取图片文件真实宽度和大小
var img = new Image();
img.onload=function(){
realWidth = img.width;
realHeight = img.height;
//获取图片真实高度之后
initJcrop();//初始化Jcrop插件
};
img.src = url;
};
image.src = url;
}
//初始化Jcrop插件
function initJcrop(){
$target.removeAttr("style");//清空上一次初始化设置的样式
$target.Jcrop({
setSelect:[10,10,350,218],
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: xsize / ysize
},function(){
//初始化后回调函数
// 获取图片实际显示的大小
var bounds = this.getBounds();
boundx = bounds[0];//图片实际显示宽度
boundy = bounds[1];//图片实际显示高度
// 保存jcrop_api变量
updatePreview({
h: 208,
w: 340,
x: 10,
x2: 350,
y: 10,
y2: 218
});
jcrop_api = this;
console.log(jcrop_api)
});
}
//更新显示预览内容
function updatePreview(c){
console.log(c);
if (parseInt(c.w) > 0) {
//更新canvas画板内容
var img=document.getElementById("target");
var ct=document.getElementById("myCan");
var ctx=ct.getContext("2d");
//清空画板
ctx.clearRect(0,0, ct.width, ct.height);
//.drawImage(图像对象,原图像截取的起始X坐标,原图像截取的起始Y坐标,原图像截取的宽度,原图像截取的高度,绘制图像的起始X坐标,绘制图像的起始Y坐标,绘制图像所需要的宽度,绘制图像所需要的高度);
ctx.drawImage(img, c.x/boundx * realWidth,c.y/boundy * realHeight, c.w/boundx * realWidth, c.h/boundy * realHeight,0,0, 340, 208);
}
}
//初始化预览div内容
function initTarget(){
$target.removeAttr("style");//清空上一次初始化设置的样式
$target.css({
maxWidth: '100%',
maxHeight: '100%'
});
}
//文件上传
function uploadFile(){
//获取裁剪完后的base64图片url,转换为blob
var data=document.getElementById("myCan").toDataURL();
var arr = data.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
console.log(new File([u8arr],"压缩", {type:mime}));
$(".chang").attr("src",data)
}
//把base64位的toDataURL图片转换成blob
function dataURLtoBlob(dataurl) {
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 });
}
window.onload = function () {
//初始化图片
preImg('./1.jpg');
};
</script>
</body>
</html>
文档地址:http://code.ciaoca.com/jquery/jcrop/
demo下载地址:
文档里面有免费的下载地址
上一篇: html 转换成图片
下一篇: 图片裁剪上传