Question

是否有机会让用户从硬盘驱动器中选择图像而不将其提交给服务器，请在浏览器中使用此图像？

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

我尝试做的是使用输入类型文件然后捕获提交事件，但输入的值只是一个假路径（无用）。

非常感谢任何帮助。

Answer 1

以下是图像缩放的一个非常基本的示例（包含许多全局变量，没有输入验证...）：http://jsfiddle.net/89HPM/3/。它使用File API和canvas元素。正如@anu所说，可以使用画布的toDataUrl方法完成保存。以类似的方式，您可以实现裁剪。

<强>的JavaScript

(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);
    };
}

<强> HTML

<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>

以下是我发表的关于该基本示例的博文：blog.mgechev.com

Answer 2

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

http://www.html5rocks.com/en/tutorials/file/dndfiles/

它允许您在Javascript中浏览和读取文件。做你喜欢的任何处理，然后上传到服务器。除此之外的任何事情确实非常棘手，可能是不可避免的服务器之旅和返回。

这里的下方是浏览器支持.....一如既往

Answer 3

我不确定哪些浏览器工作正常但HTML5得到DnD和File API。让我使用FileAPI为您提供适合您的步骤。

DnD API：当用户释放鼠标并发生鼠标悬停事件时，以drop事件开始。
DnD API：从drop事件中获取DataTransfer对象
文件API：调用DataTransfer.files获取FileList，表示已删除的文件列表。
文件API：遍历所有单个文件实例，并使用FileReader对象来阅读其内容。
文件API：使用FileReader.readAsDataURL(file)调用，每次完全读取文件时，新的“数据网址”（RFC 2397）创建格式化对象，并将包装它的事件触发到onload对象上的FileReader处理程序。仅供参考：“data URL”对象是 Base64编码的二进制数据，具有规范定义的字符标题序列。浏览者理解它们。
HTML5 DOM：将图片href设置为File Data URL

Answer 4

您不能，原因如下：

由于此帖中所述的原因：Full path from file input using jQuery
如果你甚至试图创建一个img元素加载a 本地文件路径，您将在浏览器的控制台中收到错误Not allowed to load local resource:。
事实上，一旦你有一个图像，你只能改变它在屏幕上显示不更改系统上的文件或将更改的图像发送到服务器
您已经声明需要跨浏览器支持，因此HTML5文件API和Canvas API已经完成，即使它们只允许部分功能。

Answer 5

我刚刚解决了你的问题。

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

＆＃13;

/* some scripting to bind a change event and to send the selected image
to img element */
$(document.ready(function(){
  $("input:file").each(function(){
    var id = '' + $(this).attr('id');   
    var idselector = '#'+id, imgselector=idselector+'-vwr';
    $(idselector).bind("change", function( event ){
      (imgselector).fadeIn("fast").attr('src', 
       URL.createObjectURL(event.target.files[0]));
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!-- create a img element to show the selected image and an input file element to select the image.
ID attribute is the key to have an easy and short scripting
note they are related suffix -vwr makes the difference
-->
<img src="" id="image-input-vwr" alt="image to be cropped">
<input type="file" id="image-input" name="image_input">

＆＃13;

希望它对某些身体有所帮助，因为这是一个非常古老的问题。

Luis G. Quevedo

选择一个图像并在javascript中操作它（没有表单提交）

5 个答案: