这是一个面条刮刀。
请记住,我们有 HTML5 本地存储和 xhr v2 等等。我想知道是否有人可以找到一个可行的示例,甚至只是对这个问题给出“是”或“否”:
是否可以使用新的本地存储(或其他)预先调整图像大小,以便不知道如何调整图像大小的用户可以将其 10mb 图像拖到我的网站中,它使用新的本地存储调整其大小,然后然后以较小的尺寸上传。
我完全知道你可以使用 Flash、Java 小程序、active X 来做到这一点...问题是你是否可以使用 Javascript + Html5 来做到这一点。
期待对此的回应。
暂时是Ta。
是的,使用File API https://developer.mozilla.org/en/Using_files_from_web_applications,然后您可以使用以下方法处理图像画布元素 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images.
这篇 Mozilla Hacks 博客文章 http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/引导您完成大部分过程。作为参考,这里是博客文章中汇编的源代码:
// 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
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)