image 加入 mode 属性

lib/pen.js

@@ -215,7 +215,29 @@ export default class Painter {
       width,
       height,
     } = this._preProcess(view);
-    this.ctx.drawImage(view.url, -(width / 2), -(height / 2), width, height);
+    // 获得缩放到图片大小级别的裁减框
+    let rWidth;
+    let rHeight;
+    let startX = 0;
+    let startY = 0;
+    if (width > height) {
+      rHeight = Math.round((view.sWidth / width) * height);
+      rWidth = view.sWidth;
+    } else {
+      rWidth = Math.round((view.sHeight / height) * width);
+      rHeight = view.sHeight;
+    }
+    if (view.sWidth > rWidth) {
+      startX = Math.round((view.sWidth - rWidth) / 2);
+    }
+    if (view.sHeight > rHeight) {
+      startY = Math.round((view.sHeight - rHeight) / 2);
+    }
+    if (view.css.mode === 'aspectFit') {
+      this.ctx.drawImage(view.url, -(width / 2), -(height / 2), width, height);
+    } else {
+      this.ctx.drawImage(view.url, startX, startY, rWidth, rHeight, -(width / 2), -(height / 2), width, height);
+    }
     this.ctx.restore();
     this._doBorder(view, width, height);
   }

painter.js

@@ -99,7 +99,7 @@ Component({
         let preCount = 0;
         let completeCount = 0;
         const paletteCopy = JSON.parse(JSON.stringify(this.properties.palette));
-        if (paletteCopy.background && util.isValidUrl(paletteCopy.background)) {
+        if (paletteCopy.background) {
           preCount++;
           downloader.download(paletteCopy.background).then((path) => {
             paletteCopy.background = path;
@@ -116,15 +116,28 @@ Component({
         }
         if (paletteCopy.views) {
           for (const view of paletteCopy.views) {
-            if (view && view.type === 'image' && view.url && util.isValidUrl(view.url)) {
+            if (view && view.type === 'image' && view.url) {
               preCount++;
               /* eslint-disable no-loop-func */
               downloader.download(view.url).then((path) => {
                 view.url = path;
-                completeCount++;
+                wx.getImageInfo({
-                if (preCount === completeCount) {
+                  src: view.url,
-                  resolve(paletteCopy);
+                  success: (res) => {
-                }
+                    // 获得一下图片信息，供后续裁减使用
+                    view.sWidth = res.width;
+                    view.sHeight = res.height;
+                  },
+                  fail: (error) => {
+                    console.error(`getImageInfo failed, ${Json.stringify(error)}`);
+                  },
+                  complete: () => {
+                    completeCount++;
+                    if (preCount === completeCount) {
+                      resolve(paletteCopy);
+                    }
+                  },
+                });
               }, () => {
                 completeCount++;
                 if (preCount === completeCount) {