0

我正在制作一个基于 js 的 epub 阅读器作为周末项目，我正在尝试将每本书页面上图像的 src 属性从图像 url 更改为从 epub zip 加载的数据 URI。这是我的功能：

//page contents is just an html string of the book's page
pageContents = GlobalZipLoader.load('epub.zip://' + pageLocation);
pageContents = replaceImages(pageContents)

...

function replaceImages(pageContents){
  $(pageContents).find('img').each(function(){
    var domImage = $(this);

    //this is something like ".../Images/img.jpg"
    var imageLocation = domImage.attr('src'); 

    //this returns the proper data-uri representation of the image
    var dataUri = GlobalZipLoader.loadImage('epub.zip://' + imageLocation);

    //this doesn't seem to "stick"
    domImage.attr('src', dataUri);
  });
  return pageContents;
}

replaceImages 函数返回的 pageContents 仍然具有旧的 src 属性。如果需要，我可以提供更多细节，但非常感谢任何帮助。

感谢 The System Restart 和 Ilia G 的正确答案：

function replaceImages(pageContents) {
    newContent = $(pageContent);
    ... manip ...
    return newContent;
}
4

3 回答 3

2

你不需要克隆它。只需设置pageContents = $(pageContents);，然后执行图像替换pageContents，然后return pageContents.html();

于 2012-05-13T18:44:31.703 回答
1

由于 pageContents 只是一个字符串，因此您需要返回它的修改版本。尝试这个：

function replaceImages(pageContents){
  // save jQuery object
  var $pageContents = $(pageContents);

  $pageContents.find('img').each(function(){
    var domImage = $(this);

    //this is something like ".../Images/img.jpg"
    var imageLocation = domImage.attr('src'); 

    //this returns the proper data-uri representation of the image
    var dataUri = GlobalZipLoader.loadImage('epub.zip://' + imageLocation);

    //this doesn't seem to "stick"
    domImage.attr('src', dataUri);
  });

  // return contents of the modified jQuery object
  return $pageContents.html();
}
于 2012-05-13T18:54:24.527 回答
1

src您应该在图像加载完成后尝试更改图像；

我认为这是在loadImage功能上发生的。

根据您的更新问题：

你不需要任何clone()，我想。只需存储pageContents在一个tempContents变量中并使用该变量

于 2012-05-13T18:21:12.463 回答