Javascript/jQuery使用ajaxlaravel5.2压缩正确的图像或植入帖子并保存到控制器

我使用的是Laravel5.2框架。我的应用程序要求进行客户端图像压缩，以最大限度地减少数据带宽消耗。为了实现这一点，我正在寻找JavaScript和/或jQuery中的解决方案。从我以前使用form post将图像上传为多部分数据的实现中，我发现一些图像在上传到服务器时会翻转，因此我需要在上传图像之前进行客户端方向校正。图像将使用ajax上传。生成的图像必须具有240x240维。

这是一个相对较好的问题，我不知道为什么有些人会投反对票。可能是问题中的标点错误

压缩图像的最佳方法是首先在html画布中绘制图像。假设您使用的是文件输入

var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("dstv_full_image").files[0]);

oFReader.onloadend = function() {
         //declare the exif variable
         var exif =EXIF.readFromBinaryFile(base64ToArrayBuffer(this.result));
         //dynamicaly create the canvas 
         var canvas= document.createElement('canvas');
        canvas.id     = "CursorLayer";
        canvas.width  = 160;
        canvas.height = 160;
        canvas.style.zIndex   = 8;
        canvas.style.position = "absolute";
        canvas.style.border   = "1px solid";
        //declare canvas context
        var ctx = canvas.getContext("2d");

        var img = new Image();
        //then on image load else code will run before and the result will be a black uploaded image!
        img.onload = function() {
              var orientation =exif.Orientation;;

switch (orientation) {
  case "2":
    // horizontal flip
    ctx.translate(width, 0)
    ctx.scale(-1, 1)
    ctx.drawImage(img, 0, 0,240, 240);
    break
  case "3":
    // 180° rotate left
    //ctx.translate(width, height)
    ctx.rotate(Math.PI)
    ctx.drawImage(img, -240, -240,240, 240);
    break
  case "4":
    // vertical flip
    //ctx.translate(0, height)
    ctx.scale(1, -1)
    ctx.drawImage(img, 0, 0,240, 240);
    break
  case "5":
    // vertical flip + 90 rotate right
    ctx.rotate(0.5 * Math.PI)
    ctx.scale(1, -1)
    ctx.drawImage(img, 0, -240,240, 240);
    break
  case "6":
    // 90° rotate right
    ctx.rotate(0.5 * Math.PI)
    //ctx.translate(0, -height)
    ctx.drawImage(img, 0, -240,240, 240);
    break
  case "7":
    // horizontal flip + 90 rotate right
    ctx.rotate(0.5 * Math.PI)
    //ctx.translate(width, -height)
    ctx.scale(-1, 1)
    ctx.drawImage(img, 0, -240,240, 240);
    break
  case "8":
    // 90° rotate left
    //alert("steve")
    ctx.rotate(-0.5 * Math.PI)
    //ctx.translate(-width, 0)
    ctx.drawImage(img, -240,0, 240, 240);
    break

   default:
   ctx.drawImage(img, 0 ,0, 240, 240);
   break 
}
var dataURL=canvas.toDataURL();

                    var request = $.ajax({
                                url: "settings_picture_save",
                                type: "POST",
                                data: {quest_id : dataURL},
                                dataType: "html"
                                });

                           request.done(function(msg) {
                           console.log(msg);


                              }


                           })
                       }
           img.src =this.result;
}

当然，不要忘记包含exif JavaScript库和以下函数

function base64ToArrayBuffer (base64) {
    base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
    var binaryString = window.atob(base64);
    var len = binaryString.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
        bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes.buffer;
}

---

当然，别忘了你需要自己研究所有这些问题的必要途径。当您遇到与代码相关的特定问题时，请回来。谢谢。我不知道如何正确实现exif.js库，而且我保存的图像也回来了，这就是为什么我尽可能多地发布开放式问题的原因。我几乎放弃了这种方法。

public function settings_picture_save(Request $request){
   $src = Input::get('quest_id');
       //get the base-64 from data
   //$base64_str = substr($myquest_id, strpos($myquest_id, ",")+1);
   $src = str_replace('data:image/png;base64,', '', $src);
   $src = str_replace(' ', '+', $src);

   //decode base64 string
   $image = base64_decode($src);
   $png_url = "product-".time().".png";
   $path = ('uploads/' . $png_url);

   //Image::make($image->getRealPath())->save($path);
   // write image
   $result = file_put_contents($path, $image); 
   echo json_encode('done');
}