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;// 缩放图片需要的canvasvar 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, ‘上传成功‘); ???????????} ???????} ???}
前端裁剪图片并上传的做法整理
原文地址：https://www.cnblogs.com/youcle/p/9973843.html