实现H5选择本地图片裁剪及上传功能。
选择图片:
裁剪:
页面UI就不再做排板了,只展示功能实现:
页面布局比较简单:
<body>
<input type="file" accept="image/*" id="uploadImg" name="uploadImg">
<input type="button" value="上传" id="btnSubmit">
<!-- <div class="photo" id="preview"></div> -->
<div class="photo" id="previewDiv">
<img src="images/bg.png" id="preview">
</div>
<button onclick="split()"> 裁剪 </button>
<div id="croppedResult">
<img id="cropped-result">
</div>
</body>
选取图片功能代码:
// 拍照选择完成的回调
function handleFileImg() {
// 为了获取图片的本地路径
window.URL = window.URL || window.webkitURL;
// 获取移动端类型Android iPhone ipad
var sUserAgent = navigator.userAgent.toLowerCase();
// 获取当前图片信息(单张图片上传)
var selected_file = uploadImg.files[0];
console.log(selected_file);
if (sUserAgent.match(/android/i) == "android") {
var img = new Image();
// 生成一个本地图片展示路径
img.src = window.URL.createObjectURL(selected_file);
previewDiv.innerHTML = '';
// 添加到页面展示
previewDiv.appendChild(img);
img.id = "preview";
cropper = null;
image = document.getElementById('preview');
cropper = new Cropper(image, {
aspectRatio: 9 / 9, // 设置裁剪比例为16:9
autoCrop: true, // 自动创建裁剪框
viewMode: 2, // 设置裁剪框可移动和缩放的范围
// 更多配置选项...
});
/*
new FileReader():方法简述
一、调用FileReader对象的方法
方法名 参数 描述
abort none 中断读取
readAsBinaryString file 将文件读取为二进制码
readAsDataURL file 将文件读取为 DataURL
readAsText file, [encoding] 将文件读取为文本
readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。
readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
二、处理事件
事件 描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中
*/
var reader = new FileReader();//简单来说就是异步读取电脑中的文件
reader.onload = function (e) {
imgurl = e.target.result;
};
reader.readAsDataURL(selected_file);
} else {
//判断文件类型是否为图片
if (!selected_file.type.match(/image.*/)) return false;
var img = document.createElement('img');
// base64赋值
img.file = selected_file;
previewDiv.innerHTML = '';
previewDiv.appendChild(img);
img.id = "preview";
img.onload = function () {
imgurl = img.src;
cropper = null;
image = document.getElementById('preview');
cropper = new Cropper(image, {
aspectRatio: 9 / 9, // 设置裁剪比例为16:9
autoCrop: true, // 自动创建裁剪框
viewMode: 2, // 设置裁剪框可移动和缩放的范围
// 更多配置选项...
});
};
var reader = new FileReader();
reader.onload = function (e) {
img.src = e.target.result;
};
reader.readAsDataURL(selected_file);
}
}
裁剪代码:
//裁剪============================================
var image = '';
var cropper = null;
function split() {
// 获取裁剪结果(返回裁剪后的图像数据)
var croppedData = cropper.getCroppedCanvas().toDataURL('image/jpeg');
// 将裁剪结果显示在另一个元素中
var resultElement = document.getElementById('cropped-result');
resultElement.src = croppedData;
}
//裁剪=================================================
裁剪功能使用cropper.js
图片上传代码:
// 上传base64编码到后台
function submitImg() {
// 根据公司需要自行修改
var start = imgurl.indexOf(',') + 1;
dataurl = imgurl.substr(start);
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('post', 'xxxxx', true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlhttp.setRequestHeader('X_Requested-With', 'XMLHttpRequest');
xmlhttp.send('dataurl=' + encodeURIComponent(dataurl));
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log(xmlhttp.responseText)
}
}
}
整个项目工程地址:https://download.csdn.net/download/Highning0007/87918101