在EPUB.js中，如果需要實現(xiàn)自動縮放，通過添加smartimages.js就可以實現(xiàn)圖片自動縮放了，經(jīng)過研究smartimages.js，發(fā)現(xiàn)，他可以是實現(xiàn)圖片的縮放，但只能實現(xiàn)圖片比需要顯示的空間高時才會把圖片縮小，因此，對于比較寬的圖片就會出現(xiàn)截斷的問題，經(jīng)過對smartimages.js的修改我實現(xiàn)了通過smartimages.js實現(xiàn)EPUB.js電子書閱讀的圖片自動縮放。

EPUB.js的圖片縮放是通過EPUB.js的Hooks功能實現(xiàn)的，smartimages.js的第一行代碼就是：

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

EPUB.js會在每一章數(shù)據(jù)加載并開始顯示是調(diào)用該函數(shù)。他原來的實現(xiàn)如下：

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，就修改圖片的高度樣式為特定的高度，并沒有對高度進(jìn)行處理。

經(jīng)過分析，EPUB.js可以對圖文進(jìn)行分欄顯示，如果我要對寬度超出的顯示寬度的圖片進(jìn)行縮放，就需要知道顯示區(qū)域的寬度。經(jīng)過瀏覽器的調(diào)試工具和代碼搜索，終于發(fā)現(xiàn)，EPUB.js的數(shù)據(jù)顯示是通過一個叫做cloumnWidth的樣式來決定顯示區(qū)域的寬度的。

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

這個columnWidth具體的名稱是有EPUBJS的一個前綴決定的，可能是考慮到瀏覽器兼容的關(guān)系。為了得到圖片的document對象，可以通過對象的ownerDocument獲得文檔對象，由于EPUB.js的顯示是通過在內(nèi)嵌的iframe組件顯示的，所以需要得到顯示的根文檔對象，通過documentElement獲得文檔的元素，再取得其樣式，這個樣式通過prefixed的屬性取得的，通過上面的代碼就可以取到時間顯示區(qū)域的寬度。

以下是代碼修改部分（只貼了相關(guān)部分）：

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";

上面的代碼就是監(jiān)測img組件的clientWidth和clientHeight來比較現(xiàn)實區(qū)域的高度和寬度的，在通過設(shè)定對象的寬度和高度樣式。這里需要注意兩點：

1. 要實現(xiàn)圖像的縮放，其實很簡單，比如，如果需要把一個圖片的寬度設(shè)定到區(qū)域的100%，那么他的寬度就是顯示區(qū)域的寬度，而高度設(shè)置為auto即可，這樣圖片的比例就可以得到保證，相反也是可以得，為了美觀，我設(shè)置了圖片居中，，把圖片放在中間會比較好看些。注意：設(shè)置align為middle是無效的，需要設(shè)置display為block，再把marginLeft, marginRight樣式修改為auto才可以然圖片居中。

2. EPUB.js在調(diào)用該函數(shù)的時候，前面一次調(diào)用，img的clientWidth和clientHeight為0，后面一次的調(diào)用才會是圖片的實際大小，為此，我在size函數(shù)的前面加上了一句：

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

為此完美解決了EPUB.js在圖片顯示時圖片裁剪的問題

版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。

轉(zhuǎn)載于:https://www.cnblogs.com/yin138/p/4902241.html

總結(jié)

以上是生活随笔為你收集整理的EPUB.js 解决图片裁剪问题(缩放问题)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。