Merge pull request #12 from XianZhengquan/release/v1.1.0

Release/v1.1.0

README.md

@@ -53,6 +53,9 @@ json2canvas({
 | :---- | :---- | :---- |
 | `json2canvas` | 通过参数获得画图数据 | (props: IJson2canvasProps) => Promise<string> |
 | `getTextHeight` | 获取多行文本的高度 | (ctx: CanvasRenderingContext2D, props: ITextAutoBreakProps) => number |
+| `loadImage` | 加载图片 | (url: string) => Promise<HTMLImageElement> |
+| `drawRoundRectPath` | 绘制圆角矩形路径 | (ctx: CanvasRenderingContext2D, props: Omit<IRoundRectType, 'x' &#124; 'y' &#124; 'backgroundColor' &#124; 'callback' &#124; 'type'>) => void |
+| `fillRoundRect` | 填充圆角矩形 | (ctx: CanvasRenderingContext2D, props: Omit<IRoundRectType, 'callback' &#124; 'type'>) => void |
 
 ## 更新
 
@@ -63,6 +66,7 @@ json2canvas({
 - 优化了代码结构
 - 修改了 `json2canvas` 的返回值, `Promise<{url: string}>` =>>> `Promise<string>`
 - 增加了 `getTextHeight` 方法，以获取多行文本的高度
+- 增加了 `loadImage` 方法
 
 
 > 2021年7月26日
@@ -88,4 +92,8 @@ json2canvas({
 
 > 2021年11月01日 (v1.0.9)
 
-- 导出画圆角矩形方法
+- 导出画圆角矩形方法 `drawRoundRectPath`
+
+> 2021年11月02日 (v1.1.0)
+
+- 增加画圆角图片 `ImageName.RoundImage`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-to-canvas",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "json-to-canvas",
   "entry": "src/index.ts",
   "main": "dist/index.cjs.js",

src/index.ts

@@ -9,3 +9,4 @@ export { default as json2canvas } from './utils/json-to-canvas';
 export { default as getTextHeight } from './utils/get-text-height';
 export { default as loadImage } from './utils/load-image';
 export { default as drawRoundRectPath } from './utils/draw-round-rect-path';
+export { default as fillRoundRect } from './utils/fill-round-rect';

src/types.ts

@@ -8,6 +8,7 @@ export enum SourceItemType {
 export enum ImageName {
   Avatar = 'avatar',
   Qrcode = 'qrcode',
+  RoundImage = 'round-image'
 }
 
 export interface ITextAutoBreak {
@@ -33,6 +34,7 @@ export interface IImageType {
   name?: ImageName;
   borderColor?: string;
   lineWidth?: number;
+  radius?: number;
   callback?: ISourceItemCallback<Omit<IImageCallbackType, 'callback' | 'type' | 'name'>>;
 }
 

src/utils/draw-round-rect-path.ts

@@ -1,35 +1,35 @@
 import { IRoundRectType } from '../types';
 
-type DrawRoundRectType = (cxt: CanvasRenderingContext2D, props: Omit<IRoundRectType, 'x' | 'y' | 'backgroundColor' | 'callback' | 'type'>) => void
+type DrawRoundRectType = (ctx: CanvasRenderingContext2D, props: Omit<IRoundRectType, 'x' | 'y' | 'backgroundColor' | 'callback' | 'type'>) => void
 
-const drawRoundRectPath: DrawRoundRectType = (cxt, props) => {
+const drawRoundRectPath: DrawRoundRectType = (ctx, props) => {
   const { width, height, radius } = props;
 
-  cxt.beginPath();
+  ctx.beginPath();
   //从右下角顺时针绘制，弧度从0到1/2PI
-  cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
+  ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
 
   //矩形下边线
-  cxt.lineTo(radius, height);
+  ctx.lineTo(radius, height);
 
   //左下角圆弧，弧度从1/2PI到PI
-  cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
+  ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
 
   //矩形左边线
-  cxt.lineTo(0, radius);
+  ctx.lineTo(0, radius);
 
   //左上角圆弧，弧度从PI到3/2PI
-  cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);
+  ctx.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);
 
   //上边线
-  cxt.lineTo(width - radius, 0);
+  ctx.lineTo(width - radius, 0);
 
   //右上角圆弧
-  cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);
+  ctx.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);
 
   //右边线
-  cxt.lineTo(width, height - radius);
-  cxt.closePath();
+  ctx.lineTo(width, height - radius);
+  ctx.closePath();
 };
 
 export default drawRoundRectPath;

src/utils/fill-round-rect.ts

@@ -1,22 +1,22 @@
 import { IRoundRectType } from '../types';
 import drawRoundRectPath from './draw-round-rect-path';
 
-type FillRoundRectType = (cxt: CanvasRenderingContext2D, props: Omit<IRoundRectType, 'callback' | 'type'>) => void
+type FillRoundRectType = (ctx: CanvasRenderingContext2D, props: Omit<IRoundRectType, 'callback' | 'type'>) => void
 
-const fillRoundRect: FillRoundRectType = (cxt, props) => {
+const fillRoundRect: FillRoundRectType = (ctx, props) => {
   const { x, y, width, height, radius, backgroundColor } = props;
   //圆的直径必然要小于矩形的宽高
   if (2 * radius > width || 2 * radius > height) {
     return false;
   }
 
-  cxt.save();
-  cxt.translate(x, y);
+  ctx.save();
+  ctx.translate(x, y);
   //绘制圆角矩形的各个边
-  drawRoundRectPath(cxt, { width, height, radius });
-  cxt.fillStyle = backgroundColor || '#000'; //若是给定了值就用给定的值否则给予默认值
-  cxt.fill();
-  cxt.restore();
+  drawRoundRectPath(ctx, { width, height, radius });
+  ctx.fillStyle = backgroundColor || '#000'; //若是给定了值就用给定的值否则给予默认值
+  ctx.fill();
+  ctx.restore();
   return void 0;
 };
 

src/utils/json-to-canvas.ts

@@ -12,6 +12,7 @@ import { toDataURL } from 'qrcode';
 import loadImage from './load-image';
 import textAutoBreak from './text-auto-breack';
 import fillRoundRect from './fill-round-rect';
+import drawRoundRectPath from './draw-round-rect-path';
 
 interface IGenerateCommonProps {
   canvasProps: ICanvasProps;
@@ -47,6 +48,7 @@ const generateImage = async (props: GenerateImageProps) => {
   const width = sourceItem.width * scale;
   const height = sourceItem.height * scale;
   const lineWidth = (sourceItem?.lineWidth ?? 4) * scale;
+  const radius = (sourceItem?.radius ?? 4) * scale;
 
   if (name === ImageName.Qrcode) {
     toDataURL(document.createElement('canvas'), sourceItem.url, (err, res) => {
@@ -71,7 +73,6 @@ const generateImage = async (props: GenerateImageProps) => {
         }
       );
     } else if (name === ImageName.Avatar) {
-      // 在 clip() 之前保存canvas状态
       ctx.save();
       ctx.strokeStyle = borderColor;
       ctx.lineWidth = lineWidth * scale;
@@ -87,7 +88,13 @@ const generateImage = async (props: GenerateImageProps) => {
       ctx.stroke();
       ctx.clip();
       ctx.drawImage(Image, x, y, width, height);
-      // 恢复到上面save()时的状态
+      ctx.restore();
+    } else if (name === ImageName.RoundImage) {
+      ctx.save();
+      ctx.translate(x, y);
+      drawRoundRectPath(ctx, { width, height, radius });
+      ctx.clip();
+      ctx.drawImage(Image, 0, 0, width, height);
       ctx.restore();
     } else {
       ctx.drawImage(Image, x, y, width, height);