zk-draw/package/draw_image/draw_image.js

canvas绘制AI数据的一个工具类

/*
 * 
 * @Author: wangfpp 
 * @Date: 2020-04-28 09:14:19 
 * @Last Modified by: wangfpp
 * @Last Modified time: 2020-04-28 10:27:19
 */

import { copyCtxConf } from "../../comm/comm";




/**
 * @description 绘制表情图
 * @param {Canvas 2D} ctx  Canvas 2d
 * @param {String} imgsrc 图片的路径 
 * @param {Object} option 配置参数 
 * {startx:  starty:  width: 0, height: 0原始图像的绘图点
 * , targetx:0, targety: 0, targetWidth: 20, targetHeight: 20 　绘制到canvas上的绘图点
 * }
 */
//startx, starty, width = 20, height = 20
const drawImage= (ctx, imgsrc, option) =>{
    /**
     * 拷贝ctx的属性信息
     */
    const ctxConfig = copyCtxConf(ctx);
    const defaultConfig = {startx: 0, starty: 0, width: 0, height: 0, targetx:0, targety: 0, targetWidth: 20, targetHeight: 20 };
    let reactConfig = Object.assign(ctxConfig, defaultConfig, option),
    {startx, starty, width, height, targetx, targety, targetWidth, targetHeight } = reactConfig,
    image = new Image();
    image.onload = function(e) {
        let imgSize = e.target;
        let [originalWidth, originalHeight] = [imgSize.naturalWidth, imgSize.naturalHeight];
        if (!width) {
            width = originalWidth
        }
        if (!height) {
            height = originalHeight
        }
        ctx.beginPath();
        ctx.drawImage(image, startx, starty, width,  height, targetx, targety, targetWidth, targetHeight);
        ctx.closePath()
    }
    image.src = imgsrc;
}

export { drawImage };