选择图像并在javascript中操作它（无表单提交）

是否有可能让用户从硬盘中选择一个图像，而不将其提交给服务器，从而在浏览器中使用该图像

我之所以需要它，是因为我希望用户能够在将裁剪后的图像发送到服务器之前裁剪图像，从而保存帖子和一些字节的数据

我试图做的是使用一个输入类型的文件，然后捕获提交事件，但是来自输入的值只是一个伪路径

---

任何帮助都将不胜感激。

新的HTML5文件API可能是最接近您需要的解决方案：

它允许您浏览和读取Javascript中的文件。做任何你喜欢的处理，然后上传到服务器。除此之外的任何事情都将非常棘手，而且可能不可避免地往返于服务器

---

这里的缺点是浏览器支持……一如既往，我不确定哪些浏览器工作得很好，但HTML5得到了DnD和文件API。让我给你一些使用FileAPI的步骤

DNDAPI：当用户释放鼠标并发生鼠标向上事件时，从drop事件开始。 DNDAPI：从drop事件获取数据传输对象 文件API：调用DataTransfer.files以获取文件列表，表示已删除的文件列表。 文件API：迭代所有单个文件实例，并使用FileReader对象读取其内容。 文件API：使用FileReader.readAsDataURLfile调用，每次完全读取文件时，都会创建一个新的“数据URL”RFC 2397格式的对象，并向FileReader对象上的onload处理程序触发一个事件包装它。 仅供参考：“数据URL”对象是Base64编码的二进制数据，具有规范定义的字符头序列。浏览器理解它们

HTML5 DOM：将图像href设置为文件数据URL

---

这是一个非常基本的例子，有许多全局变量，没有输入验证。。。图像缩放的比例：。它使用了和canvas元素。 正如@anu所说，可以使用canvas的toDataUrl方法进行保存。 以类似的方式，你可以实现作物

JavaScript

HTML

---

下面是我关于这个基本例子的一篇博文：

你不能，原因如下：

出于本文所述的原因：

事实上，如果您甚至尝试创建一个img元素来加载 本地文件路径将出现错误，不允许加载本地文件 资源：在浏览器的控制台中

事实上，一旦你有了一个图像，你只能改变它的位置 显示在屏幕上，不更改系统上的文件或将更改后的图像发送到服务器

您已经声明需要跨浏览器支持，所以HTML5文件API和画布API已经过时，尽管它们只允许部分功能

---

我刚刚解决了一个与你相近的问题

正如大家所说，你不能得到真正的图像文件地址。但是，您可以创建临时路径并在页面中显示图像，而无需将其提交到服务器。我将在下一段中展示它是多么容易。 一旦显示它，您就可以使用一些javascripts事件来伪裁剪它并获得裁剪参数。最后，您可以将参数添加到某个隐藏字段并提交表单。因此，您可以使用som php在服务器上裁剪提交的图像，并使用.png、jpg、gif等多种图像格式保存结果。抱歉，如果我没有编写完整的解决方案，我没有足够的时间

/*一些用于绑定更改事件和发送所选映像的脚本 到img元素*/ $document.readyfunction{ $input:file.eachfunction{ var id=+$this.attr'id'； var idselector=+id，imgselector=idselector+'-vwr'； $idselector.bindchange，函数事件{ imgselector.fadeInfast.attr'src'， URL.createObjectURLevent.target.files[0]； }; }; };

---

如果基于web的javascript可以操作客户端硬盘上的文件，那就糟糕了。但是在我的例子中，用户愿意用图像填充输入。我并不是在试图破解用户的硬盘，这个问题是相关的：因为你无法获得路径，所以无法加载图像，例如通过元素。事实上，正如我刚刚发现的，如果你甚至试图创建一个img元素来加载一个本地文件路径，你会得到一个错误：不允许加载本地资源：在你的浏览器控制台中。@PabloMescher当然，你可能没有试图攻击用户的文件，但是浏览器无法知道你的意图不是恶意的。因此，JS与文件选择对话框和文件系统的交互通常受到设计的极大限制。所以没有办法获取图像数据？悲伤..谢谢你的回答，但据我所知，这只在chrome中受支持，所以它不支持。mozilla也支持它。我使用FileReader对象在上传之前显示图像的缩略图。和其他HTML5的东西

---

rop、上载进度等。在这种情况下，浏览器支持是一个主要问题。我想我的问题的答案是不，你不能。一旦你有了这个，你还需要一个图形库来实际处理图像。虽然有一些可以让你操作屏幕上显示的图像，但我不知道有哪些可以让你将修改后的图像数据发送到服务器，除非你可以获得画布内容的二进制输出。好的；到目前为止，我已经将我的两条评论转化为一个答案，总结了为什么这无法实现。太好了。然后使用toDataURL将画布另存为图像。等待所有浏览器都能正常运行的那一天，特别是IE：这很好，但我想我可以省去为旧浏览器编写回退版本并将文件发布到服务器的麻烦。无论如何谢谢你

(function init() {
    document.getElementById('picture').addEventListener('change', handleFileSelect, false);
    document.getElementById('width').addEventListener('change', function () {
        document.getElementById('canvas').width = this.value;
        renderImage();
    }, false);
    document.getElementById('height').addEventListener('change', function () {
        document.getElementById('canvas').height = this.value;
        renderImage();
    }, false);
}());

var currentImage;

function handleFileSelect(evt) {
    var file = evt.target.files[0];
        if (!file.type.match('image.*')) {
            alert('Unknown format');
        }
    var reader = new FileReader();

    reader.onload = (function(theFile) {
        return function(e) {
            currentImage = e.target.result;            
            renderImage();
        };
    })(file);

    reader.readAsDataURL(file);
 }

function renderImage() {
    var data = currentImage,
        img = document.createElement('img');
    img.src = data;
    img.onload = function () {
    var can = document.getElementById('canvas'),
        ctx = can.getContext('2d');
        ctx.drawImage(this, 0, 0, can.width, can.height);
    };
}​

<input type="file" name="picture" id="picture" /><br />
<input type="text" id="width" value="200" />
<input type="text" id="height" value="200" /><br />
<canvas width="200" height="200" style="border: 1px solid black;" id="canvas"></canvas>​