@cloudcome/utils-browser/dist/canvas.mjs.map

cloudcome utils for browser

{"version":3,"file":"canvas.mjs","sources":["../src/canvas.ts"],"sourcesContent":["import { objectDefaults } from '@cloudcome/utils-core/object';\nimport { imageLoad } from './image';\n\n/**\n * 将 Canvas 转换为 Base64 编码的字符串\n * @param {HTMLCanvasElement} canvas - 需要转换的 Canvas 元素\n * @param {string} [type] - 图片格式，默认为 'image/png'\n * @param {number} [quality] - 图片质量，范围 0 到 1，仅适用于 'image/jpeg' 或 'image/webp'\n * @returns {string} Base64 编码的图片数据\n * @example\n * const base64 = canvasToBase64(canvas, 'image/jpeg', 0.8);\n */\nexport function canvasToBase64(canvas: HTMLCanvasElement, type?: string, quality?: number) {\n  return canvas.toDataURL(type, quality);\n}\n\n/**\n * 将 Canvas 转换为 Blob 对象\n * @param {HTMLCanvasElement} canvas - 需要转换的 Canvas 元素\n * @param {string} [type] - 图片格式，默认为 'image/png'\n * @param {number} [quality] - 图片质量，范围 0 到 1，仅适用于 'image/jpeg' 或 'image/webp'\n * @returns {Promise<Blob>} 返回一个包含 Blob 对象的 Promise\n * @example\n * const blob = await canvasToBlob(canvas, 'image/jpeg', 0.8);\n */\nexport async function canvasToBlob(canvas: HTMLCanvasElement, type?: string, quality?: number) {\n  return new Promise<Blob>((resolve, reject) => {\n    canvas.toBlob(\n      (blob) => {\n        if (blob) {\n          resolve(blob);\n        } else {\n          reject(new Error('canvas 导出二进制对象失败'));\n        }\n      },\n      type,\n      quality,\n    );\n  });\n}\n\n/**\n * Canvas 绘制图片的配置选项\n */\nexport type CanvasDrawImageOptions = {\n  /**\n   * 源图片的左上角 x 坐标\n   * @type {number}\n   * @default 0\n   */\n  srcLeft?: number;\n  /**\n   * 源图片的左上角 y 坐标\n   * @type {number}\n   * @default 0\n   */\n  srcTop?: number;\n  /**\n   * 源图片的宽度\n   * @type {number}\n   * @default 图片的原始宽度\n   */\n  srcWidth?: number;\n  /**\n   * 源图片的高度\n   * @type {number}\n   * @default 图片的原始高度\n   */\n  srcHeight?: number;\n\n  /**\n   * 目标 Canvas 的左上角 x 坐标\n   * @type {number}\n   * @default 0\n   */\n  destLeft?: number;\n  /**\n   * 目标 Canvas 的左上角 y 坐标\n   * @type {number}\n   * @default 0\n   */\n  destTop?: number;\n  /**\n   * 目标 Canvas 的宽度\n   * @type {number}\n   * @default Canvas 的宽度\n   */\n  destWidth?: number;\n  /**\n   * 目标 Canvas 的高度\n   * @type {number}\n   * @default Canvas 的高度\n   */\n  destHeight?: number;\n};\n\n/**\n * 在 Canvas 上绘制图片\n * @param {HTMLCanvasElement} canvas - 目标 Canvas 元素\n * @param {string} url - 图片的 URL\n * @param {CanvasDrawImageOptions} [options] - 绘制图片的配置选项\n * @returns {Promise<void>} 返回一个 Promise，表示绘制完成\n * @example\n * await canvasDrawImage(canvas, 'https://example.com/image.png', {\n *   srcLeft: 10,\n *   srcTop: 10,\n *   srcWidth: 100,\n *   srcHeight: 100,\n *   destLeft: 0,\n *   destTop: 0,\n *   destWidth: 200,\n *   destHeight: 200\n * });\n */\nexport async function canvasDrawImage(canvas: HTMLCanvasElement, url: string, options?: CanvasDrawImageOptions) {\n  const ctx = canvas.getContext('2d');\n  if (!ctx) throw new Error('canvas context is null');\n\n  const img = await imageLoad(url);\n  const defaults: CanvasDrawImageOptions = {\n    srcLeft: 0,\n    srcTop: 0,\n    srcWidth: img.width,\n    srcHeight: img.height,\n    destLeft: 0,\n    destTop: 0,\n    destWidth: canvas.width,\n    destHeight: canvas.height,\n  };\n  const { srcLeft, srcTop, srcWidth, srcHeight, destLeft, destTop, destWidth, destHeight } = objectDefaults(\n    options || {},\n    defaults,\n  ) as Required<CanvasDrawImageOptions>;\n  ctx.drawImage(\n    img,\n    // source\n    srcLeft,\n    srcTop,\n    srcWidth,\n    srcHeight,\n    // dest\n    destLeft,\n    destTop,\n    destWidth,\n    destHeight,\n  );\n}\n"],"names":[],"mappings":";;AAYgB,SAAA,eAAe,QAA2B,MAAe,SAAkB;AAClF,SAAA,OAAO,UAAU,MAAM,OAAO;AACvC;AAWsB,eAAA,aAAa,QAA2B,MAAe,SAAkB;AAC7F,SAAO,IAAI,QAAc,CAAC,SAAS,WAAW;AACrC,WAAA;AAAA,MACL,CAAC,SAAS;AACR,YAAI,MAAM;AACR,kBAAQ,IAAI;AAAA,QAAA,OACP;AACE,iBAAA,IAAI,MAAM,kBAAkB,CAAC;AAAA,QAAA;AAAA,MAExC;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA,CACD;AACH;AA2EsB,eAAA,gBAAgB,QAA2B,KAAa,SAAkC;AACxG,QAAA,MAAM,OAAO,WAAW,IAAI;AAClC,MAAI,CAAC,IAAW,OAAA,IAAI,MAAM,wBAAwB;AAE5C,QAAA,MAAM,MAAM,UAAU,GAAG;AAC/B,QAAM,WAAmC;AAAA,IACvC,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU,IAAI;AAAA,IACd,WAAW,IAAI;AAAA,IACf,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW,OAAO;AAAA,IAClB,YAAY,OAAO;AAAA,EACrB;AACM,QAAA,EAAE,SAAS,QAAQ,UAAU,WAAW,UAAU,SAAS,WAAW,WAAA,IAAe;AAAA,IACzF,WAAW,CAAC;AAAA,IACZ;AAAA,EACF;AACI,MAAA;AAAA,IACF;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;"}