Javascript/jQuery压缩一个图像正确的评论帖子，并使用Ajax Laravel 5.2保存到控制器中

Javascript/jQuery compress an image correct oreantation post and save to a controller using Ajax Laravel 5.2

本文关键字：Ajax Laravel 控制器 保存 评论 压缩 jQuery 图像 一个 Javascript      更新时间：2023-09-26

我使用的是Laravel 5.2框架。我的应用程序要求是进行客户端图像压缩，以最大限度地减少数据带宽消耗。为了实现这一点，我正在四处寻找JavaScript和/或jQuery的解决方案。在我之前使用表单帖子将图像上传为多部分数据的过程中，我发现一些图像在上传到服务器时会翻转，因此我需要在图像上传之前进行客户端方向校正。图像将使用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;
}

然后在你的控制器上

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');
}

当然，不要忘记必要的路线

相关文章：