欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端裁剪图片并上传的做法整理

程序员文章站 2022-04-09 09:16:00
...

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, '上传成功');
            }
        }
    }