这是一个面条刮刀。
请记住,我们有 HTML5 本地存储和 xhr v2 等等。 我想知道是否有人能找到一个可行的例子,甚至只是给我一个是或否这个问题:
是否可以使用新的本地存储(或其他)预先调整图像大小,以便不知道调整图像大小的用户可以将他们的 10mb 图像拖到我的网站中,它使用新的本地存储调整它的大小和然后以较小的尺寸上传。
我很清楚你可以用 Flash、Java 小程序、active X 来做到这一点……问题是你是否可以用 Javascript + Html5 来做。
期待对此的回应。
塔暂时。
是的,使用File API,然后您可以使用canvas 元素处理图像。
这篇 Mozilla Hacks 博客文章将引导您完成大部分过程。以下是博客文章中汇编的源代码供参考:
// from an input element var 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