时间戳

首页 > 解决方案 > HTML5 图片上传，拖放、裁剪和比例

javascript - HTML5 图片上传，拖放、裁剪和比例

问题描述

我正在尝试使用带有拖放、裁剪和比率 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)
}

标签： javascriptajaxhtml

解决方案

推荐阅读