上传前HTML 5预先调整大小的图像

Question

这是面条刮痕。

请记住，我们有HTML 5本地存储和xhr v2等等。我在想，是否有人能找到一个有用的例子，甚至给我一个“是”或“否”来回答这个问题：

是否可以使用新的本地存储器(或其他什么)预先调整图像的大小，以便不知道图像大小的用户可以将他们的10 MB图像拖到我的网站上，它可以使用新的本地存储来调整图像的大小，然后将其上传到更小的大小。

我很清楚你可以用Flash，Java Applet，Active X.问题是，您是否可以使用Javascript+HTML 5。

期待着对这个问题的回应。

就目前而言。

Answer 1

// from an input elementvar filesToUpload = input.files;var file = filesToUpload[0];var img = document.createElement("img");var reader = new FileReader();  reader.onload = function(e) {img.src = e.target.result}reader.readAsDataURL(file);var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0);var MAX_WIDTH = 800;var MAX_HEIGHT = 600;var width = img.width;var height = img.height;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;  }}canvas.width = width;canvas.height = height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, width, height);var dataurl = canvas.toDataURL("image/png");//Post dataurl to the server with AJAX

Answer 2

以上更正：<img&nbsp;src=""&nbsp;id="image"><input&nbsp;id="input"&nbsp;type="file"&nbsp;onchange="handleFiles()"><script>function&nbsp;handleFiles(){ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;filesToUpload&nbsp;=&nbsp;document.getElementById('input').files; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;file&nbsp;=&nbsp;filesToUpload[0]; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Create&nbsp;an&nbsp;image &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;img&nbsp;=&nbsp;document.createElement("img"); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Create&nbsp;a&nbsp;file&nbsp;reader &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;reader&nbsp;=&nbsp;new&nbsp;FileReader(); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Set&nbsp;the&nbsp;image&nbsp;once&nbsp;loaded&nbsp;into&nbsp;file&nbsp;reader &nbsp;&nbsp;&nbsp;&nbsp;reader.onload&nbsp;=&nbsp;function(e) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img.src&nbsp;=&nbsp;e.target.result; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;canvas&nbsp;=&nbsp;document.createElement("canvas"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//var&nbsp;canvas&nbsp;=&nbsp;$("<canvas>",&nbsp;{"id":"testing"})[0]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;ctx&nbsp;=&nbsp;canvas.getContext("2d"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.drawImage(img,&nbsp;0,&nbsp;0); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;MAX_WIDTH&nbsp;=&nbsp;400; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;MAX_HEIGHT&nbsp;=&nbsp;300; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;width&nbsp;=&nbsp;img.width; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;height&nbsp;=&nbsp;img.height; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(width&nbsp;>&nbsp;height)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(width&nbsp;>&nbsp;MAX_WIDTH)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height&nbsp;*=&nbsp;MAX_WIDTH&nbsp;/&nbsp;width; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width&nbsp;=&nbsp;MAX_WIDTH; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(height&nbsp;>&nbsp;MAX_HEIGHT)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width&nbsp;*=&nbsp;MAX_HEIGHT&nbsp;/&nbsp;height; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height&nbsp;=&nbsp;MAX_HEIGHT; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canvas.width&nbsp;=&nbsp;width; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canvas.height&nbsp;=&nbsp;height; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;ctx&nbsp;=&nbsp;canvas.getContext("2d"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.drawImage(img,&nbsp;0,&nbsp;0,&nbsp;width,&nbsp;height); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;dataurl&nbsp;=&nbsp;canvas.toDataURL("image/png"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById('image').src&nbsp;=&nbsp;dataurl;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Load&nbsp;files&nbsp;into&nbsp;file&nbsp;reader &nbsp;&nbsp;&nbsp;&nbsp;reader.readAsDataURL(file); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Post&nbsp;the&nbsp;data &nbsp;&nbsp;&nbsp;&nbsp;/* &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fd&nbsp;=&nbsp;new&nbsp;FormData(); &nbsp;&nbsp;&nbsp;&nbsp;fd.append("name",&nbsp;"some_filename.jpg"); &nbsp;&nbsp;&nbsp;&nbsp;fd.append("image",&nbsp;dataurl); &nbsp;&nbsp;&nbsp;&nbsp;fd.append("info",&nbsp;"lah_de_dah"); &nbsp;&nbsp;&nbsp;&nbsp;*/}</script>