html5选择图像并进行操作

html5 select image and manipulate

本文关键字：操作 选择 图像 html5      更新时间：2023-09-26

我正在创建一个应用程序，希望用户在其中上传带有HTML5 <input type="file"/> 的图像

我知道浏览器出于安全考虑限制了获取图像的路径，所以我不能复制图像路径并将其放在我想要的地方。

基本上，我希望用户提交一个图像，我希望能够通过将其设置为div的背景图像并将图像放在其他地方来操作图像。希望通过改变它的来源。这不是一个服务器端应用程序，所以PHP或任何服务器端语言都不是一个选项。

示例：如果用户单击按钮，则用户提交的图像可以设置为其他div的background-image: url('image-path')，并应用于其他图像标签。

还没有在多个浏览器上进行测试，但可以尝试以下操作：

<input type="file" id="file">

$('#file').change(function(evt){
    var img = $('<img/>');
    var div = $('<div class="with-image"/>');
    $(document.body).append(img);
    $(document.body).append(div);
    var reader = new FileReader();
    reader.onload = (function(img) { 
        return function(ev) {
            var image = ev.target.result;
            img[0].src = image;
            div.css('background-image', 'url("' + image + '")');
        };
    })(img);
    var file = evt.target.files[0];
    reader.readAsDataURL(file);
});

这是一把小提琴。

您可能希望使用新的File API来实现这一点，而这实际上是在没有服务器的情况下实现这一目标的唯一方法。这里有一个例子：

JSFiddle：http://jsfiddle.net/41w6f7n9/

;(function(window, undefined) {
  var 
    doc = window.document,
    userFile = doc.getElementById('userFile'),
    divPreviews = doc.querySelectorAll('.preview'),
    imgPreview = doc.getElementById('img-preview'),
    // We will read the file as a Data URL.
    fileReader = new FileReader();
  var fileutil = {
    init: function() {
      userFile.addEventListener('change', function(e) {
        fileutil.readFile(this.files[0]);  
      }, false);
    },
    readFile: function(file) {
      var self = this;
      // When done reading.
      fileReader.onload = function(e) {
        if (e.target.readyState === 2) { // 2 means DONE
          self.preview(e.target.result);
        }
      };
      // Start reading the file as a Data URL and wait to complete.
      fileReader.readAsDataURL(file);
    },
    preview: function(imageURL) {
      imgPreview.src = imageURL;
      divPreviews[0].style.backgroundImage = 'url('+imageURL+')';
      divPreviews[1].style.backgroundImage = 'url('+imageURL+')';
    }
  };
  fileutil.init();
}(this));


HTML：

<form>
  <input type="file" id="userFile">
</form>
<h1>Image Preview</h1>
<img src="" width="400" id="img-preview">
<h1>Div preview 1</h1>
<div id="preview1" class="preview"></div>
<h1>Div preview 2</h1>
<div id="preview2" class="preview"></div>
相关文章：