0

有没有办法让用户从他的硬盘驱动器中选择一个图像而不将其提交给服务器在浏览器中使用这个图像？

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

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

任何帮助将不胜感激。

4

5 回答 5

5

这是一个非常基本的图像缩放示例（有许多全局变量，没有输入验证......）：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

于 2012-11-01T13:26:34.233 回答
4

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

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

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

这里的缺点是浏览器支持.....一如既往

于 2012-11-01T13:07:59.693 回答
2

我不确定哪些浏览器可以完美运行，但HTML5有. 让我给你一些可以为你使用的步骤。DnDFile APIFileAPI

  1. DnD API：当用户释放鼠标并发生鼠标抬起事件时，从 drop 事件开始。
  2. DnD API：DataTransfer从 drop 事件中获取对象
  3. 文件 API：调用DataTransfer.files以获取 a FileList，表示已删除的文件列表。
  4. File API：遍历所有单独的 File 实例并使用一个FileReader对象来读取它们的内容。

  5. 文件 API：使用该FileReader.readAsDataURL(file)调用，每次完全读取文件时，都会创建一个新的“数据 URL” （RFC 2397）格式的对象，并将一个包装它的事件触发到对象onload上的处理程序FileReader。仅供参考：“<code>data URL”对象是Base64 编码的二进制数据，具有规范定义的标头字符序列。浏览器理解它们。

  6. HTML5 DOM：将图像设置href为File Data URL

于 2012-11-01T13:13:36.930 回答
0

你不能，原因如下：

  • 由于这篇文章中所述的原因：使用 jQuery 的文件输入的完整路径

  • 事实上，如果您甚至尝试创建一个img加载本地文件路径的元素，您将Not allowed to load local resource:在浏览器的控制台中收到错误消息。

  • 事实上，一旦你有了一个图像，你只能改变它在屏幕上的外观，而不能改变系统上的文件或将改变后的图像发送到服务器

  • 您已经声明您需要跨浏览器支持，因此 HTML5 File API 和 Canvas API 已经过时，即使它们只允许部分功能。

于 2012-11-01T13:26:39.550 回答
0

我刚刚解决了一个与您无关的问题。

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

/* 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]));
    });
  });
});
<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">

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

路易斯·克韦多

于 2015-11-11T02:45:46.220 回答