纯js合并图片

# 规划

- 可以先改变尺寸, 再合并

- 合并功能尽量简单, 通过多次合并来达到最终目的

# 功能细节

- 改变尺寸功能

- 横向和纵向两个合并功能

- 可以删除不需要合并的图片

- 可以移动合并图片的顺序(暂未实现, 选择图片的时候, 可以注意一下顺序)

- 点击合并后的图片可以下载, 方便用户操作

# 页面截图

# 代码关键方法

## 基础方法, 读取用户选择的图片数据

    //从input选择的图片文件中读取到img对象中
    this.getImageByFile = function(file, callback) {
        //异步读取
        let p = new Promise((success, error) => {
            let reader = new FileReader();
            reader.onload = function(evt) {
                let image = new Image();
                image.src = evt.target.result;
                success(image);
            };

            reader.readAsDataURL(file);
        }).then(image => {
            callback(image); //把图像数据传给回调方法
        }).catch(rs => {
            console.log('getImageByFile: error: ' + rs);
        })
            
    }

## 改变尺寸

    //修改尺寸(支持长宽锁定)
    this.resize = function(image, width, height) {
        // console.log(image);
        if (!width) {
            width = image.width;
        }

        if (!height) {
            height = parseInt((width * image.height) / image.width); //高度等比例缩放
        }

        //创建画布
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        canvas.width  = width;
        canvas.height = height;

        //画图
        ctx.drawImage(image, 0, 0, width, height);

        //返回改变了尺寸后的img元素, 方便展示在页面中
        let img = document.createElement('img'); //等价于 new Image();
        img.src = canvas.toDataURL('image/png');
        return img;
    }

## 横向合并图片

    /** 
     * 合并图片, 横向
     * @params string list_id 包含img元素的父元素 
     * @params int gap 合并后两张图片之间的间隔
     **/
    this.merge_image_row = function (list_id, gap=0) {
        let image_list = document.getElementById(list_id).getElementsByTagName('img');
        let total_width = 0; //画布的宽度应该等于所有待合并图片的总宽度, 加上间隔
        let max_height = 0; //画布的高度应该等于待合并的图片中高度最高的
        for (let i=0; i<image_list.length; i++) {
            total_width += image_list[i].width + gap;
            if (image_list[i].height > max_height) {
                max_height = image_list[i].height;
            }
        }

        //创建画布
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        canvas.width  = total_width;
        canvas.height = max_height;

        //画图
        let width_used = 0;
        for (let i=0; i<image_list.length; i++) {
            let image = image_list[i];
            ctx.drawImage(image, width_used, 0, image.width, image.height);
            width_used += image.width + gap;
        }
        

        //返回img元素, 方便在页面展示
        let img = document.createElement('img'); //等价于 new Image();
        img.src = canvas.toDataURL('image/png');
        return img;

    }

## 纵向合并图片

    /** 
     * 合并图片, 横向
     * list_id 包含img元素的父元素 
     * gap: 间隔
     **/
    this.merge_image_col = function (list_id, gap=0) {
        let image_list = document.getElementById(list_id).getElementsByTagName('img');
        let total_height = 0;
        let max_width = 0;
        for (let i=0; i<image_list.length; i++) {
            total_height += image_list[i].height + gap;
            if (image_list[i].width > max_width) {
                max_width = image_list[i].width;
            }
        }

        //创建画布
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        canvas.width  = max_width;
        canvas.height = total_height;

        //画图
        let height_used = 0;
        for (let i=0; i<image_list.length; i++) {
            let image = image_list[i];
            ctx.drawImage(image, 0, height_used, image.width, image.height);
            height_used += image.height + gap;
        }
        

        //返回img元素
        let img = document.createElement('img'); //等价于 new Image();
        img.src = canvas.toDataURL('image/png');
        return img;

    }

## 点击图片可下载图片

    document.getElementById('image_merge').addEventListener('click', download_image);
    function download_image(e) {
        // console.log(e);
        let a = document.createElement('a');
        a.download = 'merge.png';
        a.href = e.target.src;
        a.click();
    }

# 试用

## 图片合并: 无数据上传, 可按F12查看所有源代码:图片合并http://tool.hearu.top/image/merge

 ## 其他小工具

小工具列表http://tool.hearu.top/tool/home