前端将服务器返回图片进行裁剪和框选重要信息_前端图片截取怎么写-优快云博客

本文链接：https://blog.youkuaiyun.com/yang_yin/article/details/137506416

文章介绍了如何通过JavaScript创建一个名为`ChangeImages`的类，该类利用HTML5CanvasAPI实现图片的裁剪和在指定位置绘制矩形的功能，提供`cropImage`和`drawBoxOnImage`方法处理图片并返回新的数据URL。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


interface Rect {
    w: number;//需要图片宽度
    h: number;//需要图片高度
    x: number; //开始操作横坐标
    y: number;//开始操作纵坐标
}

/**
* @class
* @description 通过 canvas 将图片修改，
*/

class ChangeImages {
    image: HTMLImageElement;
    canvas: HTMLCanvasElement;
    constructor() {
        this.image = new Image();
        this.canvas = document.createElement('canvas');
    }

    /**
    * @function 
    * @description 裁剪图片
    * @param {String} imageUrl -  图片地址
    * @param {rect} rect -  图片裁剪位置及宽高
    * @param {String} crossOrigin -  跨域类型
    * @return {Promise} 返回裁剪后图片地址
    * @example
    *   new class().cropImage(imageUrl，rect)
    */

    cropImage(imageUrl: string, rect: Rect, crossOrigin: string = 'anonymous'): Promise<string> {
        const { x, y, w, h } = rect
        this.image.crossOrigin = crossOrigin;//设置跨域
        this.image.src = imageUrl;
        this.canvas.width = w;
        this.canvas.height = h;
        const context = this.canvas.getContext('2d');
        return new Promise((resolve, reject) => {
            this.image.onload = () => {
                context?.drawImage(this.image, x, y, w, h, 0, 0, w, h);
                resolve(this.canvas.toDataURL('image/png'));
            };
            this.image.onerror = (error) => {
                reject(error);
            };
        });
    };

    /**
    * @function 
    * @description 在图片绘制矩形
    * @param {String} imageUrl -  图片地址
    * @param {rect} rects -  图片绘制位置及宽高
    * @param {string} color -  图片绘制的颜色
    * @return {Promise} 返回绘制后图片地址
    * @example
    *   new class().drawBoxOnImage(imageUrl，rects)
    */

    drawBoxOnImage(imageUrl: string, rects: Rect[] | Rect, color: string = 'red'): Promise<string> {
        const ctx = this.canvas.getContext('2d');
        this.image.src = imageUrl;
        return new Promise((resolve, reject) => {
            this.image.onload = () => {
                this.canvas.width = this.image.width;
                this.canvas.height = this.image.height;
                ctx?.drawImage(this.image, 0, 0);
                ctx?.beginPath();
                ctx && (ctx.lineWidth = 5);
                ctx && (ctx.strokeStyle = color);
                Array.isArray(rects) ? rects.forEach(({ x, y, w, h }: Rect) => ctx?.rect(x, y, w, h)) : ctx?.rect(rects.x, rects.y, rects.w, rects.h);
                ctx?.stroke();
                resolve(this.canvas.toDataURL('image/png'));
            }
            this.image.onerror = (error) => {
                reject(error);
            };

        })
    }
}
export default new ChangeImages