前端裁剪图片并上传的做法整理
H5页面写法
<!DOCTYPE html>
<html>
<body>
<input type="file" name="file" id="file" />
<script>
var eleFile = document.querySelector('#file');
// 压缩图片需要的一些元素和对象
var reader = new FileReader(), img = new Image();
// 选择的文件对象
var file = null;
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
// base64地址图片加载完毕后
img.onload = function () {
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// 最大尺寸限制
var maxWidth = 400, maxHeight = 400;
// 目标尺寸
var targetWidth = originWidth, targetHeight = originHeight;
// 图片尺寸超过400x400的限制
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > maxWidth / maxHeight) {
// 更宽，按照宽度限定尺寸
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
// canvas对图片进行缩放
canvas.width = targetWidth;
canvas.height = targetHeight;
// 清除画布
context.clearRect(0, 0, targetWidth, targetHeight);
// 图片压缩
context.drawImage(img, 0, 0, targetWidth, targetHeight);
// canvas转为blob并上传
canvas.toBlob(function (blob) {
// 图片ajax上传
var xhr = new XMLHttpRequest();
// 文件上传成功
xhr.onreadystatechange = function() {
if (xhr.status == 200) {
// xhr.responseText就是返回的数据
}
};
// 开始上传
xhr.open("POST", 'pc.php', true);
xhr.send(blob);
},'image/png');
// }, file.type || 'image/png');
};
// 文件base64化，以便获知图片原始尺寸
reader.onload = function(e) {
img.src = e.target.result;
};
eleFile.addEventListener('change', function (event) {
file = event.target.files[0];
// 选择的文件是图片
if (file.type.indexOf("image") == 0) {
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>
php代码
<?php
$data = file_get_contents("php://input");
file_put_contents("test.png",$data);
?>
wxapp写法
function uploadimg(data, urls, funsuccess, funerror ,_this){
var that=this;
var i=data.i?data.i:0;
var success=data.success?data.success:0;
var fail=data.dail?data.fail:0;
wx.getImageInfo({
src: data.path[i],
success: function (res) {
console.log(res)
var ctx = wx.createCanvasContext('photo_canvas');
var ratio = 2;
var canvasWidth = res.width
var canvasHeight = res.height;
// 保证宽高均在800以内
while (canvasWidth > 800 || canvasHeight > 800) {
//比例取整
canvasWidth = Math.trunc(res.width / ratio)
canvasHeight = Math.trunc(res.height / ratio)
ratio = ratio+0.5;
}
_this.setData({
canvasWidth: canvasWidth,
canvasHeight: canvasHeight
})//设置canvas尺寸
ctx.drawImage(data.path[i], 0, 0, canvasWidth, canvasHeight)
ctx.draw(false,function(){
//下载canvas图片
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'photo_canvas',
fileType: 'jpg',
destWidth: canvasWidth,
destHeight: canvasHeight,
quality: 1,
success: function (res) {
console.log(res)
var tempFilePaths = res.tempFilePath
wx.uploadFile({
url: data.url,
filePath: tempFilePaths,
name: data.name,
formData: data.formData,
success: (resp) => {
console.log(resp)
var resp = JSON.parse(resp.data);
if (resp.errcode == 0) {
success++;
urls.push(resp.data);
wx.showToast({
title: '上传完成第' + success + '张照片',
duration: 1000
});
} else {
fail++;
console.log('fail:' + i + "fail:" + fail);
}
},
fail: (res) => {
fail++;
console.log('fail:' + i + "fail:" + fail);
},
complete: () => {
i++;
if (i == data.path.length) { //当图片传完时，停止调用
console.log('执行完毕');
console.log('成功：' + success + " 失败：" + fail);
if (fail == 0) {
funsuccess();
} else {
funerror();
}
return false;
} else {//若图片还没有传完，则继续调用函数
data.i = i;
data.success = success;
data.fail = fail;
that.uploadimg(data, urls, funsuccess, funerror,_this);
}
}
});
},
fail: function (error) {
console.log(error)
}
})
}, 200)
})
}
})
}
wxml代码
<canvas canvas-id="photo_canvas" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;position: absolute;left:-9999px;top:-9999px;"></canvas>
php代码
public function upload()
{
$uplad_tmp_name = $_FILES['imgfile']['tmp_name'];
$uplad_name = $_FILES['imgfile']['name'];
$image_url = "";
//上传文件类型列表
$uptypes = array(
'image/jpg',
'image/jpeg',
'image/png',
'image/pjpeg',
'image/gif',
'image/bmp',
'image/x-png'
);
//初始化变量
$date = date('ymdhis') . uniqid();
//上传文件路径
$img_url = IMG_BASE_URL . date('ym') . "/";
$img_url_data = "data/images/" . date('ym') . "/";
if (!is_dir($img_url_data)) {
mkdir($img_url_data, 0777);
}
//如果当前图片不为空
if (!empty($uplad_name) && in_array($_FILES["imgfile"]["type"],$uptypes)) {
$uptype = explode(".", $uplad_name);
$newname = $date . "." . end($uptype);
$uplad_name = $newname;
//如果上传的文件没有在服务器上存在
if (!file_exists($img_url_data . $uplad_name)) {
//把图片文件从临时文件夹中转移到我们指定上传的目录中
$file = $img_url_data . $uplad_name;
move_uploaded_file($uplad_tmp_name, $file);
chmod($file, 0777);
/*
include(LIB_PATH."/resize.class.php");
$resizeObj = new resize($file);
$resizeObj -> resizeImage(800, 9999999, 'auto');
$resizeObj -> saveImage($file, 100);
*/
$img_url1 = $img_url . $newname;
$this->ajax_info(0, $img_url1, '上传成功');
}
}
}
