EPUB.js 解决图片裁剪问题(缩放问题)

在EPUB.js中，如果需要实现自动缩放，通过添加smartimages.js就可以实现图片自动缩放了，经过研究smartimages.js，发现，他可以是实现图片的缩放，但只能实现图片比需要显示的空间高时才会把图片缩小，因此，对于比较宽的图片就会出现截断的问题，经过对smartimages.js的修改我实现了通过smartimages.js实现EPUB.js电子书阅读的图片自动缩放。

EPUB.js的图片缩放是通过EPUB.js的Hooks功能实现的，smartimages.js的第一行代码就是：

EPUBJS.Hooks.register("beforeChapterDisplay").smartimages

EPUB.js会在每一章数据加载并开始显示是调用该函数。他原来的实现如下：

EPUBJS.Hooks.register("beforeChapterDisplay").smartimages = function(callback, renderer){var images = renderer.contents.querySelectorAll('img'),items = Array.prototype.slice.call(images),iheight = renderer.height,//chapter.bodyEl.clientHeight,//chapter.doc.body.getBoundingClientRect().height,oheight;if(renderer.layoutSettings.layout != "reflowable") {callback();return; //-- Only adjust images for reflowable text}items.forEach(function(item){function size() {var itemRect = item.getBoundingClientRect(),rectHeight = itemRect.height,top = itemRect.top,oHeight = item.getAttribute('data-height'),height = oHeight || rectHeight,newHeight,fontSize = Number(getComputedStyle(item, "").fontSize.match(/(\d*(\.\d*)?)px/)[1]),fontAdjust = fontSize ? fontSize / 2 : 0;iheight = renderer.contents.clientHeight;if(top < 0) top = 0;if(height + top >= iheight) {if(top < iheight/2) {// Remove top and half font-size from height to keep container from overflowingnewHeight = iheight - top - fontAdjust;item.style.maxHeight = newHeight + "px";item.style.width= "auto";}else{if(height > iheight) {item.style.maxHeight = iheight + "px";item.style.width= "auto";itemRect = item.getBoundingClientRect();height = itemRect.height;}item.style.display = "block";item.style["WebkitColumnBreakBefore"] = "always";item.style["breakBefore"] = "column";}item.setAttribute('data-height', newHeight);}else{item.style.removeProperty('max-height');item.style.removeProperty('margin-top');}}item.addEventListener('load', size, false);renderer.on("renderer:resized", size);renderer.on("renderer:chapterUnloaded", function(){item.removeEventListener('load', size);renderer.off("renderer:resized", size);});size();});if(callback) callback();}

从上面的代码可以看出，他只计算了高度，如果高度大于iheight，就修改图片的高度样式为特定的高度，并没有对高度进行处理。

经过分析，EPUB.js可以对图文进行分栏显示，如果我要对宽度超出的显示宽度的图片进行缩放，就需要知道显示区域的宽度。经过浏览器的调试工具和代码搜索，终于发现，EPUB.js的数据显示是通过一个叫做cloumnWidth的样式来决定显示区域的宽度的。

var columnWidth = parseInt(item.ownerDocument.documentElement.style[EPUBJS.core.prefixed('columnWidth')]);

这个columnWidth具体的名称是有EPUBJS的一个前缀决定的，可能是考虑到浏览器兼容的关系。为了得到图片的document对象，可以通过对象的ownerDocument获得文档对象，由于EPUB.js的显示是通过在内嵌的iframe组件显示的，所以需要得到显示的根文档对象，通过documentElement获得文档的元素，再取得其样式，这个样式通过prefixed的属性取得的，通过上面的代码就可以取到时间显示区域的宽度。

以下是代码修改部分（只贴了相关部分）：

var columnWidth = parseInt(item.ownerDocument.documentElement.style[EPUBJS.core.prefixed('columnWidth')]);
if (item.clientWidth > item.clientHeight){//land imageif (item.clientWidth > columnWidth){item.style.width = "100%";item.style.height = "auto";// recheck clientHeightif (item.clientHeight > top + iheight){item.style.width = "auto";item.style.height = "100%";item.align = "middle";}}else if (item.clientHeight > top + iheight){item.style.width = "auto";item.style.height = "100%";}else{item.style.width = "auto";item.style.height = "auto";}
}else{// port imageif (item.clientHeight > top + iheight){item.style.width = "auto";item.style.height = "100%";//recheck clientWidthif (item.clientWidth > columnWidth){item.style.width = "100%";item.style.height = "auto";}}else if (item.clientWidth > columnWidth){item.style.width = "100%";item.style.height = "auto";}else{item.style.width = "auto";item.style.height = "auto";}
}
item.style.display = "block";
item.style.marginLeft = "auto";
item.style.marginRight = "auto";

上面的代码就是监测img组件的clientWidth和clientHeight来比较现实区域的高度和宽度的，在通过设定对象的宽度和高度样式。这里需要注意两点：

1. 要实现图像的缩放，其实很简单，比如，如果需要把一个图片的宽度设定到区域的100%，那么他的宽度就是显示区域的宽度，而高度设置为auto即可，这样图片的比例就可以得到保证，相反也是可以得，为了美观，我设置了图片居中，，把图片放在中间会比较好看些。注意：设置align为middle是无效的，需要设置display为block，再把marginLeft, marginRight样式修改为auto才可以然图片居中。

2. EPUB.js在调用该函数的时候，前面一次调用，img的clientWidth和clientHeight为0，后面一次的调用才会是图片的实际大小，为此，我在size函数的前面加上了一句：

function size() {// return while item has not client positionif (item.clientWidth == 0 && item.clientHeight == 0) return;//...
}

为此完美解决了EPUB.js在图片显示时图片裁剪的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。

转载于:https://www.cnblogs.com/yin138/p/4902241.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！