todolist

src/libs/haibao.js

@@ -19,11 +19,11 @@ export default class Haibao {
    * @param {number} y 绘制Y坐标
    * @returns {Promise} 图片加载完成的Promise
    */
-  add (image, x, y, index) {
+  add (image, x, y, width = 'auto', height = 'auto', index) {
     this.zIndex++
     const zIndex = index ? index : this.zIndex
     const loadPromise = this._createLoadPromise(image).then(img => {
-      this.images.push({ img, x, y, zIndex });
+      this.images.push({ img, x, y, width, height, zIndex });
     });
 
     this.imagePromises.push(loadPromise);
@@ -52,8 +52,10 @@ export default class Haibao {
 
     // 绘制所有图片
     this.images.sort((a, b) => a.zIndex - b.zIndex)
-    this.images.forEach(({ img, x, y, zIndex }, idx) => {
-      this.ctx.drawImage(img, x, y);
+    this.images.forEach(({ img, x, y, width, height, zIndex }, idx) => {
+      const w = width === 'auto' ? img.width : width
+      const h = height === 'auto' ? img.height : height
+      this.ctx.drawImage(img, x, y, w, h);
       if (idx === 0) {
         this.ctx.globalCompositeOperation = mask
       } else {

src/libs/utils.js

@@ -70,7 +70,7 @@ export const isMiniPage = () => {
 }
 export const webpAsPng = (url) => {
   const nowebp = document.querySelector("html").classList.value.indexOf("nowebp") > -1
-  return nowebp ? url.replace(".webp", ".png").replace("images/", "images/png/") : url
+  return nowebp ? url.replace(".webp", ".webp").replace("images/", "images/png/") : url
 }
 export const getUserBrowersName = () => {
   const ua = navigator.userAgent