Merge pull request #4 from Jocs/filesize-optimization

bugfix: fix the problem that image adapting in android device dint work
ElemeFE · Aug 31, 2017 · d9e10a5 · d9e10a5
2 parents c3e796e + 5d01b91
commit d9e10a5
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/dist/vue-img.es6.js b/dist/vue-img.es6.js
@@ -32,10 +32,13 @@ const setAttr = (el, src, tag) => {
 
 const resize = (size) => {
   let viewWidth;
+  const dpr = window.devicePixelRatio;
+  const dataDpr = document.documentElement.getAttribute('data-dpr');
+  const ratio = dataDpr ? (dpr / dataDpr) : dpr;
+
   try {
     viewWidth = +(html.getAttribute('style').match(/(\d+)/) || [])[1];
   } catch(e) {
-    const dpr = window.devicePixelRatio;
     const w = html.offsetWidth;
     if (w / dpr > 540) {
       viewWidth = 540 * dpr / 10;
@@ -44,6 +47,8 @@ const resize = (size) => {
     }
   }
 
+  viewWidth = viewWidth * ratio;
+
   if (Number(viewWidth) >= 0 && typeof viewWidth === 'number') {
     return (size * viewWidth) / 75 // 75 is the 1/10 iphone6 deivce width pixel
   } else {

diff --git a/dist/vue-img.js b/dist/vue-img.js
@@ -42,10 +42,13 @@ var setAttr = function (el, src, tag) {
 
 var resize = function (size) {
   var viewWidth;
+  var dpr = window.devicePixelRatio;
+  var dataDpr = document.documentElement.getAttribute('data-dpr');
+  var ratio = dataDpr ? (dpr / dataDpr) : dpr;
+
   try {
     viewWidth = +(html.getAttribute('style').match(/(\d+)/) || [])[1];
   } catch(e) {
-    var dpr = window.devicePixelRatio;
     var w = html.offsetWidth;
     if (w / dpr > 540) {
       viewWidth = 540 * dpr / 10;
@@ -54,6 +57,8 @@ var resize = function (size) {
     }
   }
 
+  viewWidth = viewWidth * ratio;
+
   if (Number(viewWidth) >= 0 && typeof viewWidth === 'number') {
     return (size * viewWidth) / 75 // 75 is the 1/10 iphone6 deivce width pixel
   } else {

diff --git a/src/utils.js b/src/utils.js
@@ -19,10 +19,13 @@ export const setAttr = (el, src, tag) => {
 
 export const resize = (size) => {
   let viewWidth
+  const dpr = window.devicePixelRatio
+  const dataDpr = document.documentElement.getAttribute('data-dpr')
+  const ratio = dataDpr ? (dpr / dataDpr) : dpr
+
   try {
     viewWidth = +(html.getAttribute('style').match(/(\d+)/) || [])[1]
   } catch(e) {
-    const dpr = window.devicePixelRatio
     const w = html.offsetWidth
     if (w / dpr > 540) {
       viewWidth = 540 * dpr / 10
@@ -31,6 +34,8 @@ export const resize = (size) => {
     }
   }
 
+  viewWidth = viewWidth * ratio
+
   if (Number(viewWidth) >= 0 && typeof viewWidth === 'number') {
     return (size * viewWidth) / 75 // 75 is the 1/10 iphone6 deivce width pixel
   } else {