Question

我正在尝试通过拖放，裁剪和比例JS插件使用HTML5图片上传。

我可以使它工作到使小部件运行在允许我放大和移动它的页面上为止。但是我对保存图像感到困惑，有很多选择，但没有示例。对于我可以收集的内容，它将数据发布到URL，我可以使用以下数据作为示例来定义。我假设我必须阅读并使用它来将数据另存为.jpg图像？我在考虑正确的路线吗？

很抱歉，我在这里还是新手，但我真的不知道从哪里开始或要添加什么，但是对您的帮助将不胜感激。

我在页面上的代码是：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML5 Image upload width drag and drop, crop and ratio</title>

    <meta name="description" content="A HTML5 image upload plugin build with jQuery. Can drag and drop an image, crop it and change ratio." />

    <!-- Bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/html5imageupload.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>


    <div class="row">
        <div class="col-xs-6">

 <div class="dropzone" data-width="960" data-height="540" data-ghost="false" data-canvas="false" data-smaller="true" data-canvas-image-only="true" data-originalsize="false" data-url="" data-resize="true" style="width: 100%;">
            <input type="file" name="thumb" />
          </div>


        </div>

        <div class="col-xs-6">
          <a name="ghost"></a>
          <h2>Ghosting &amp; Original size</h2>

        </div>

      </div>

      <hr />



   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <script src="js/html5imageupload.js"></script>

    <script>

    $('#retrievingfilename').html5imageupload({
        onAfterProcessImage: function() {
            $('#filename').val($(this.element).data('name'));
        },
        onAfterCancel: function() {
            $('#filename').val('');
        }

    });

    $('#save').html5imageupload({
        onSave: function(data) {
            console.log(data);
        },

    });

    $('.dropzone').html5imageupload();

    $( "#myModal" ).on('shown.bs.modal', function(){
        $('#modaldialog').html5imageupload();
    });
    /*
    $('#form').html5imageupload({
        onAfterProcessImage: function() {
            $(this.element).closest('form').submit();
        }
    });

    $('form button.btn').unbind('click').click(function(e) {
          e.preventDefault()
          $(this).closest('form').find('#form').data('html5imageupload').imageCrop()
    });*/


    </script>

  </body>
</html>

，如果我正确的话，它发布的示例是：-

The $_POST variable

array(3) {
  ["name"]=>
  string(2) "fg"
  ["title"]=>
  string(2) "fg"
  ["thumb_values"]=>
  string(112422) "{"data":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA==","name":"logo.png","imageOriginalWidth":225,"imageOriginalHeight":44,"imageWidth":2762,"imageHeight":540,"width":960,"height":540,"left":-901,"top":0}"
}
The JSON object

object(stdClass)#1 (10) {
  ["data"]=>
  string(112262) "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA=="
  ["name"]=>
  string(8) "logo.png"
  ["imageOriginalWidth"]=>
  int(225)
  ["imageOriginalHeight"]=>
  int(44)
  ["imageWidth"]=>
  int(2762)
  ["imageHeight"]=>
  int(540)
  ["width"]=>
  int(960)
  ["height"]=>
  int(540)
  ["left"]=>
  int(-901)
  ["top"]=>
  int(0)
}

拖放，裁剪和缩放比例的HTML5图片上传

0 个答案: