web-image-factory/main.js

var dropBox, canvasList, imgList, work, imgCols
var canvass = [], imgs = []
var pic_info
var multi
var imgh = [0, 0, 0]

var vh = window.innerHeight / 100;
var vw = window.innerWidth / 100;;

window.onload = function () {
    dropBox = document.getElementById("dropbox");
    canvasList = document.getElementById("canvasList");
    work = document.getElementById("work");
    pic_info = document.getElementById("pic_info");
    imgList = document.getElementById("imgList");
    imgCols = [document.getElementById("c1"), document.getElementById("c2"), document.getElementById("c3")]
    dropBox.ondragenter = dropFileEnter;
    dropBox.ondragover = dropFileOver;
    dropBox.ondragleave = dropFileLeave;
    dropBox.ondrop = dropFile;
}

function dropFileLeave(e) {
    e.preventDefault();
    dropBox.style.background = "#FFFFCC";
}

function dropFileEnter(e) {
    e.preventDefault();
    dropBox.style.background = "rgb(182, 182, 162)";
}

function dropFileOver(e) {
    e.preventDefault();
}

function dropFile(e) {
    e.stopPropagation();
    e.preventDefault();
    var data = e.dataTransfer;
    var files = []
    for (var i = 0; i < data.files.length; i++) {
        var file_type = data.files[i].type;
        if (file_type.substr(0, 5) == "image") {
            files.push(data.files[i]);
        }
    }
    if (files.length == 0) {
        noFileError();
    }
    else processFiles(files);
}

function noFileError() {
    dropBox.style.background = "indianred";
    dropBox.innerHTML = "无有效图片文件"
    setTimeout(function () {
        dropBox.style.background = "lightyellow";
        dropBox.innerHTML = "请点击上传或将图片拖入"
    }, 1000)
}

function selectFile() {
    var fileInput = document.getElementById("fileInput");
    fileInput.click();
}

function processFiles(files) {
    multi = files.length == 1 ? 0 : 1;
    document.getElementById("drop").style.display = "none";
    document.getElementById("pic_scale_size").style.display = "flex";
    document.getElementById("pic_scale_sc").style.display = "flex";
    work.style.display = "flex";
    var pic_num = document.createElement('div');
    pic_num.setAttribute("class", "row_Text");
    pic_num.innerHTML = "图片数量：" + files.length + " 张"
    pic_info.appendChild(pic_num)
    var canvas_i = 0;
    for (var i = 0; i < files.length; i++) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var image = new Image();
            image.src = e.target.result;
            image.onload = function () {
                var width = image.width;
                var height = image.height;
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext("2d");
                canvas.setAttribute("width", width + "px")
                canvas.setAttribute("height", height + "px")
                canvas.setAttribute("id", "canvas_" + canvas_i);

                ctx.drawImage(image, 0, 0);

                canvass.push(canvas)

                canvasList.appendChild(canvas);

                imgInsert(image, canvas_i);
                canvas_i++;
                // imgList.appendChild(image);
                // dropBox.style.backgroundImage = "url('" + e.target.result + "')";
            };
        };
        reader.readAsDataURL(files[i]);
    }
}

function findex(value, arr) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] == value) return i;
    }
    return null;
}

function imgInsert(img, index) {
    var i = findex(Math.min(...imgh), imgh)
    imgh[i] += img.height / img.width * 20 * vw + 24;
    var imgdiv = document.createElement('div');
    var imgdesp = document.createElement('div');
    imgdiv.setAttribute("class", "imgcard")
    imgdesp.setAttribute("class", "imgdesp")
    imgdesp.innerHTML = "[" + (index + 1) + "] " + img.width + " x " + img.height
    img.setAttribute("width", 20 * vw + "px")
    imgdiv.setAttribute("id", "img_" + index)

    imgdiv.appendChild(img);
    imgdiv.appendChild(imgdesp);
    imgCols[i].appendChild(imgdiv);

    imgs.push(img)
}

function scale_size() {
    let new_w = document.getElementById("scale_size_width").value;
    let new_h = document.getElementById("scale_size_height").value;

    for (let i = 0; i < canvass.length; i++) {
        let scale_x = new_w / canvass[i].width
        let scale_y = new_h / canvass[i].height
        scale(i, scale_x, scale_y)
    }
}

function scale_size_sc(){
    let scale_x = parseFloat(document.getElementById("scale_size_sc_x").value); 
    let scale_y = parseFloat(document.getElementById("scale_size_sc_y").value);
    for (let i = 0; i < canvass.length; i++) {
        scale(i, scale_x, scale_y)
    }
}

function scale(index, scale_x, scale_y) {
    canvas = canvass[index]
    cxt = canvas.getContext("2d")
    imgData = cxt.getImageData(0, 0, canvas.width, canvas.height);

    canvas2 = document.createElement('canvas');
    let ctx = canvas2.getContext('2d');

    ori_w = imgData.width;
    ori_h = imgData.height;

    canvas2.setAttribute("height", ori_h * scale_y + "px");
    canvas2.setAttribute("width", ori_w * scale_x + "px");
    canvas2.setAttribute("id", "canvas_" + index)

    let data_s = []
    for (let i = 0; i < imgData.data.length;) {
        data_s.push(imgData.data.slice(i, i += 4));
    }
    let datas = []
    for (let i = 0; i < data_s.length;) {
        datas.push(data_s.slice(i, i += ori_w));
    }

    for (let i = 0; i < ori_h * scale_y; i++) {
        for (let j = 0; j < ori_w * scale_x; j++) {
            red = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][0];
            green = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][1];
            blue = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][2];
            alpha = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][3];
            ctx.fillStyle = "rgba(" + red + "," + green + "," + blue + "," + alpha + ")";
            ctx.fillRect(j, i, 1, 1)
        }
    }
    let imgdata = canvas2.toDataURL();
    newImg = new Image();
    newImg.src = imgdata;
    newImg.setAttribute("width", 20 * vw + "px")

    document.getElementById("img_" + index).replaceChild(newImg, imgs[index]);
    document.getElementById("img_" + index).getElementsByTagName("div")[0].innerHTML = "[" + (index + 1) + "] " + canvas2.width + " x " + canvas2.height;
    canvasList.replaceChild(canvas2, canvass[index]);

    canvass[index] = canvas2;
    imgs[index] = newImg;
}

// canvas = document.getElementById('Canvas');
// let cxt = canvas.getContext('2d');
// let l = canvas.width / 2;
// const PI = Math.PI;
// cxt.translate(l, l);

// let createTaiChi = () => {
//     cxt.clearRect(-l, -l, l, l);
//     cxt.arc(0, 0, l, 0, 2 * PI, 0);
//     cxt.stroke();
//     cxt.beginPath();
//     cxt.arc(0, -l / 2, l / 2, -PI / 2, PI / 2, 0);
//     cxt.arc(0, l / 2, l / 2, 3 / 2 * PI, PI / 2, 1);
//     cxt.arc(0, 0, l, PI / 2, PI * 3 / 2, 0);
//     cxt.fill();
//     cxt.beginPath();
//     cxt.fillStyle = '#fff';
//     cxt.arc(0, -l / 2, l / 7, 0, PI * 2, 0);
//     cxt.fill();
//     cxt.beginPath();
//     cxt.fillStyle = '#000';
//     cxt.arc(0, l / 2, l / 7, 0, PI * 2, 0);
//     cxt.fill();
// };

// createTaiChi();