Question

我正在尝试在用文件api创建的图像上使用提升缩放jquery插件，直接在用户的计算机上。但它似乎不起作用！就像提升缩放不能识别图像的“src”一样。

有什么想法吗？

非常感谢！

这是我的JS：

$("#testing").change(function(e) {
  var file, i, image_width, img, reader, _results;
  i = 0;
  image_width = void 0;
  _results = [];
  while (i < e.originalEvent.srcElement.files.length) {
    file = e.originalEvent.srcElement.files[i];
    img = document.createElement("img");
    img.id = "draggable";
    reader = new FileReader();
    reader.onloadend = function() {
      var image_h, image_w;
      img.src = reader.result;
    };
    reader.readAsDataURL(file);
    $("#preview_images").after(img);
    _results.push(i++);
  }
  return _results;
});

$(function() {
  $("img").elevateZoom({
    zoomType: "inner"
  });
  return {
    cursor: "crosshair"
  };
});

这是我的HTML：

<img src="data:image/jpeg;base64,/{HUGE LINES OF CODE HERE}">

Answer 1

reader.result是base64字符串的图片，所以试试这个

reader.onloadend = function() {
  var image_h, image_w;
  img.src = 'data:image/png;base64,'+reader.result;
};

使用带有提升缩放jquery插件的HTML5文件API

1 个答案: