blocks|key|4689398|text|以下是如何在不从addedfile上传文件的情况下完成此操作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4689399|重要的是将autoQueue选项设置为false，这样dropzone就不会自动上传用户选择的文件。|4689400|var+dropzone+=+new+Dropzone+(".dropzone",+{
++...
++autoQueue:+false,
++...
});|code-block|syntax|javascript|4689401|下一步是在addedfile事件中调整大小并将调整大小的版本入队。|4689402|dropzone.on("addedfile",+function(origFile)+{
++var+MAX_WIDTH++=+800;
++var+MAX_HEIGHT+=+600;

++var+reader+=+new+FileReader();

++//+Convert+file+to+img

++reader.addEventListener("load",+function(event)+{

++++var+origImg+=+new+Image();
++++origImg.src+=+event.target.result;

++++origImg.addEventListener("load",+function(event)+{

++++++var+width++=+event.target.width;
++++++var+height+=+event.target.height;


++++++//+Don't+resize+if+it's+small+enough

++++++if+(width+<=+MAX_WIDTH+&&+height+<=+MAX_HEIGHT)+{
++++++++dropzone.enqueueFile(origFile);
++++++++return;
++++++}


++++++//+Calc+new+dims+otherwise

++++++if+(width+>+height)+{
++++++++if+(width+>+MAX_WIDTH)+{
++++++++++height+*=+MAX_WIDTH+/+width;
++++++++++width+=+MAX_WIDTH;
++++++++}
++++++}+else+{
++++++++if+(height+>+MAX_HEIGHT)+{
++++++++++width+*=+MAX_HEIGHT+/+height;
++++++++++height+=+MAX_HEIGHT;
++++++++}
++++++}


++++++//+Resize

++++++var+canvas+=+document.createElement('canvas');
++++++canvas.width+=+width;
++++++canvas.height+=+height;

++++++var+ctx+=+canvas.getContext("2d");
++++++ctx.drawImage(origImg,+0,+0,+width,+height);

++++++var+resizedFile+=+base64ToFile(canvas.toDataURL(),+origFile);


++++++//+Replace+original+with+resized

++++++var+origFileIndex+=+dropzone.files.indexOf(origFile);
++++++dropzone.files[origFileIndex]+=+resizedFile;


++++++//+Enqueue+added+file+manually+making+it+available+for
++++++//+further+processing+by+dropzone

++++++dropzone.enqueueFile(resizedFile);
++++});
++});

++reader.readAsDataURL(origFile);
});|4689403|下面是一个将dataURL转换为dropzone文件的函数。如果使用canvas.toBlob()而不是canvas.toDataURL()来获取调整大小的文件的内容，过程可能会更简单，但并不是所有的浏览器都很好地支持后者。|4689404|这只是this函数的修改版本。|4689405|function+base64ToFile(dataURI,+origFile)+{
++var+byteString,+mimestring;

++if(dataURI.split(',')[0].indexOf('base64')+!==+-1+)+{
++++byteString+=+atob(dataURI.split(',')[1]);
++}+else+{
++++byteString+=+decodeURI(dataURI.split(',')[1]);
++}

++mimestring+=+dataURI.split(',')[0].split(':')[1].split(';')[0];

++var+content+=+new+Array();
++for+(var+i+=+0;+i+<+byteString.length;+i%2B%2B)+{
++++content[i]+=+byteString.charCodeAt(i);
++}

++var+newFile+=+new+File(
++++[new+Uint8Array(content)],+origFile.name,+{type:+mimestring}
++);


++//+Copy+props+set+by+the+dropzone+in+the+original+file

++var+origProps+=+[+
++++"upload",+"status",+"previewElement",+"previewTemplate",+"accepted"+
++];

++$.each(origProps,+function(i,+p)+{
++++newFile[p]+=+origFile[p];
++});

++return+newFile;
}|4689406|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob|1|https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL|2|https://stackoverflow.com/a/14930686/2016120^0|8|9|0|5|9|J|5|R|8|0|0|5|9|0|0|6|7|G|8|Y|F|0|1G|I|1|0|3|4|2|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1I|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1J|8|@$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1M|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1N|8|@$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]]|D|@$9|1S|A|1T|1|1U]|$9|1V|A|1W|1|1X]]|E|$]]|$1|S|3|T|5|6|7|1Y|8|@]|D|@$9|1Z|A|20|1|21]]|E|$]]|$1|U|3|V|5|J|7|22|8|@]|D|@]|E|$K|L]]|$1|W|3|-4|5|6|7|23|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]|14|$5|Z|10|11|E|$12|15]]|16|$5|Z|10|11|E|$12|17]]]]

<p>Here's how to do it without uploading file from <code>addedfile</code>.</p>

<p>Important thing is to set <code>autoQueue</code> option to <code>false</code>, that way <code>dropzone</code> will not auto upload files selected by a user.</p>

<pre class="lang-js prettyprint-override"><code>var dropzone = new Dropzone (".dropzone", {
  ...
  autoQueue: false,
  ...
});
</code></pre>

<p>Next step is to do resizing and enqueue resized versions in <code>addedfile</code> event.</p>

<pre class="lang-js prettyprint-override"><code>dropzone.on("addedfile", function(origFile) {
  var MAX_WIDTH  = 800;
  var MAX_HEIGHT = 600;

  var reader = new FileReader();

  // Convert file to img

  reader.addEventListener("load", function(event) {

    var origImg = new Image();
    origImg.src = event.target.result;

    origImg.addEventListener("load", function(event) {

      var width  = event.target.width;
      var height = event.target.height;


      // Don't resize if it's small enough

      if (width &lt;= MAX_WIDTH &amp;&amp; height &lt;= MAX_HEIGHT) {
        dropzone.enqueueFile(origFile);
        return;
      }


      // Calc new dims otherwise

      if (width &gt; height) {
        if (width &gt; MAX_WIDTH) {
          height *= MAX_WIDTH / width;
          width = MAX_WIDTH;
        }
      } else {
        if (height &gt; MAX_HEIGHT) {
          width *= MAX_HEIGHT / height;
          height = MAX_HEIGHT;
        }
      }


      // Resize

      var canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;

      var ctx = canvas.getContext("2d");
      ctx.drawImage(origImg, 0, 0, width, height);

      var resizedFile = base64ToFile(canvas.toDataURL(), origFile);


      // Replace original with resized

      var origFileIndex = dropzone.files.indexOf(origFile);
      dropzone.files[origFileIndex] = resizedFile;


      // Enqueue added file manually making it available for
      // further processing by dropzone

      dropzone.enqueueFile(resizedFile);
    });
  });

  reader.readAsDataURL(origFile);
});
</code></pre>

<p>Here's a function for converting <code>dataURL</code> to a <code>dropzone</code> file. Process could be simpler if you use <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob" rel="noreferrer">canvas.toBlob()</a> instead of <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL" rel="noreferrer">canvas.toDataURL()</a>, to get the content of resized file, but latter isn't supported well by all browsers.</p>

<p>It is just modified version of <a href="https://stackoverflow.com/a/14930686/2016120">this</a> function.</p>

<pre class="lang-js prettyprint-override"><code>function base64ToFile(dataURI, origFile) {
  var byteString, mimestring;

  if(dataURI.split(',')[0].indexOf('base64') !== -1 ) {
    byteString = atob(dataURI.split(',')[1]);
  } else {
    byteString = decodeURI(dataURI.split(',')[1]);
  }

  mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0];

  var content = new Array();
  for (var i = 0; i &lt; byteString.length; i++) {
    content[i] = byteString.charCodeAt(i);
  }

  var newFile = new File(
    [new Uint8Array(content)], origFile.name, {type: mimestring}
  );


  // Copy props set by the dropzone in the original file

  var origProps = [ 
    "upload", "status", "previewElement", "previewTemplate", "accepted" 
  ];

  $.each(origProps, function(i, p) {
    newFile[p] = origFile[p];
  });

  return newFile;
}
</code></pre>


blocks|key|4689456|text|Dropzone版本5是最近发布的，所以如果你升级到dropzone+5，那么你可以简单地使用resizeWidth和resizeHeigh在客户端压缩你的图像。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4689457|如果你只提供其中的一个，那么width=800将遵循原始的纵横比，例如，如果你只添加了选项：resizeWidth:+800，那么你的图像将被压缩为dropzone像素，并且原始图像的纵横比将被尊重。|4689458|entityMap^0|1B|B|1N|B|0|E|9|1A|G|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|I|$]]

<p>Dropzone version 5 is recently released, so if you upgrade to dropzone 5, then you can simply use <code>resizeWidth</code> and <code>resizeHeigh</code> to compress your image on the client side.</p>

<p>If you provide only one of them, then dropzone will respect the original aspect ratio, for example if you just add the option: <code>resizeWidth: 800</code> then your image will be compressed to <code>width=800</code> pixels and your original image's aspect ration will be respected.</p>


blocks|key|4689481|text|好的。我花了一些时间，然后又花了更多的时间来找到如何实现调整大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4689482|以下是对我有效的最终解决方案：|4689483|Import+css+and+dropzone.js

<div+class="row">
++++<div+class="col-sm-20+well">
++++++++<form+action="@Url.Action("_UploadImages",+"Notebooks",+new+{+unique+=+Model.UniqueId+})"+
++++++++++++++method="post"+
++++++++++++++enctype="multipart/form-data"
++++++++++++++class="dropzone"
++++++++++++++id="my-dropzone"></form>
++++</div>
</div>

<script+type="text/javascript">
++++Dropzone.options.myDropzone+=+{
++++++++url:+'@Url.Action("_UploadImages",+"Notebooks",+new+{+unique+=+Model.UniqueId+})',
++++++++autoProcessQueue:+true,
++++++++uploadMultiple:+true,
++++++++parallelUploads:+3,
++++++++maxFilesize:+10,
++++++++resizeWidth:+2048,
++++++++addRemoveLinks:+false,
++++++++init:+function+()+{
++++++++}
++++}
</script>|code-block|syntax|javascript|4689484|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Ok. It took me some and then some more time to find how to implement the resize.</p>

<p>Here is final solution that works for me:</p>

<pre><code>Import css and dropzone.js

&lt;div class="row"&gt;
    &lt;div class="col-sm-20 well"&gt;
        &lt;form action="@Url.Action("_UploadImages", "Notebooks", new { unique = Model.UniqueId })" 
              method="post" 
              enctype="multipart/form-data"
              class="dropzone"
              id="my-dropzone"&gt;&lt;/form&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
    Dropzone.options.myDropzone = {
        url: '@Url.Action("_UploadImages", "Notebooks", new { unique = Model.UniqueId })',
        autoProcessQueue: true,
        uploadMultiple: true,
        parallelUploads: 3,
        maxFilesize: 10,
        resizeWidth: 2048,
        addRemoveLinks: false,
        init: function () {
        }
    }
&lt;/script&gt;
</code></pre>


<p>I want to integrate <code>Dropzone.js</code> with a Client Side Image Resizing. I know that there is a function to resize the thumbnail, but I would like to create a function to resize the main image before upload. Anyone could help me please?</p>


Dropzone.js + Client Side Image Resizing

我想集成Dropzone.js与客户端图像调整大小。我知道有一个函数可以调整缩略图的大小，但我想在上传之前创建一个函数来调整主图像的大小。有谁能帮我吗？

问Dropzone.js +客户端图像大小调整
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Dropzone.js +客户端图像大小调整EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Dropzone.js +客户端图像大小调整
EN