canvas画板上传图片后怎么可以移动图片和放大缩小

Question

anvas画板上传图片后怎么可以移动图片和放大缩小，查了好几天也没找着可用的教程，
有没有大佬能教下。
可加悬赏

HTML
<canvas id="drawing-board"></canvas>
    <div class="color-group">
        <ul>
            <li id="black" class="color-item active" style="background-color: black;"></li>
            <li id="red" class="color-item" style="background-color: #FF3333;"></li>
            <li id="blue" class="color-item" style="background-color: #0066FF;"></li>
            <li id="yellow" class="color-item" style="background-color: #FFFF33;"></li>
            <li id="green" class="color-item" style="background-color: #33CC66;"></li>
            <li id="gray" class="color-item" style="background-color: gray;"></li>
            <li id="fuchsia" class="color-item" style="background-color: fuchsia;"></li>
            <li id="aqua" class="color-item" style="background-color: aqua;"></li>
            <li id="purple" class="color-item" style="background-color: purple;"></li>
            <li id="maroon" class="color-item" style="background-color: maroon;"></li>



        </ul>
    </div>
    <div id="range-wrap"><input type="range" id="range" min="1" max="50" value="5" title="">
    <canvas class="rainbow-pixel-canvas"></canvas>
    </div>
    <div class="tools">

        <button id="brush" class="active" title=""><i class="iconfont icon-qianbi">笔</i></button>
        <button id="eraser" title="" text=""><i class="iconfont icon-xiangpi">橡皮</i></button>
        <button id="clear" title=""><i class="iconfont icon-qingchu">消除</i></button>
        <button id="undo" title=""><i class="iconfont icon-chexiao">还原</i></button>
        <button id="save" title=""><i class="iconfont icon-fuzhi">保存</i></button><BR>
        <button  class="file">图片
            <input type="file" name="" id=""  onchange="onFileSelected(this)">
            </button>
    </div>



JS



let canvas = document.getElementById("drawing-board");
let ctx = canvas.getContext("2d");
let eraser = document.getElementById("eraser");
let brush = document.getElementById("brush");
let reSetCanvas = document.getElementById("clear");
let aColorBtn = document.getElementsByClassName("color-item");
let save = document.getElementById("save");
let undo = document.getElementById("undo");
let range = document.getElementById("range");
let clear = false;
let activeColor = 'black';
let lWidth = 4;
let imgs;
let bg_img;
let offsetLeft = canvas.getBoundingClientRect().left
let offsetTop = canvas.getBoundingClientRect().top
let reader = new FileReader();


    autoSetSize(canvas);

    setCanvasBg('white');

    listenToUser(canvas);

    getColor();


    window.onbeforeunload = function () {
        return "Reload site?";
    };
/*上传图片*/
  function onFileSelected(input) {

    var file = input.files[0];

    var reader = new FileReader();

    reader.onload = onFileLoaded;

    reader.readAsDataURL(file);

}

function onFileLoaded(e) {

    var src_data = e.target.result;

    var img = new Image();

    img.onload = onImageSetted;
    img.src = src_data;

}

function onImageSetted(e) {

    var img_data = createImageData(e.target);

    document.getElementById('drawing-board').width = img_data.width;
    document.getElementById('drawing-board').height = img_data.height;

    document.getElementById('drawing-board').getContext('2d').putImageData(img_data, 0, 0);

    document.getElementById('drawing-board').img_data = img_data;

    document.getElementById('drawing-board').addEventListener('click', processImageData);

}

function createImageData(img) {

    var cv = document.createElement('canvas');

    cv.width = img.naturalWidth=500;
    cv.height = img.naturalHeight=500;

    var ct = cv.getContext('2d');

    ct.drawImage(img, 0, 0);

    var data = ct.getImageData(0, 0, cv.width, cv.height);

    return data;

}

function processImageData() {

    var img_data = this.img_data;

    for (var y = 0;y < img_data.height;y++) {
        for (var x = 0;x < img_data.width;x++) {

            var index = (x + y * img_data.width) * 1;

            var r = img_data.data[index];
            var b = img_data.data[index + 1];

            img_data.data[index] = b;
            img_data.data[index + 1] = r;

        }
    }

    document.getElementById('drawing-board').getContext('2d').putImageData(img_data, x, y);

}



    function autoSetSize(canvas) {
        canvasSetSize();

        function canvasSetSize() {
            let pageWidth = document.documentElement.clientWidth;
            let pageHeight = document.documentElement.clientHeight;

            canvas.width = 500;
            canvas.height = 500;
        }

        window.onresize = function () {
            canvasSetSize();
        }
    }

    function setCanvasBg(color) {
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "black";
    }

    function listenToUser(canvas) {
        let painting = false;
        let lastPoint = { x: undefined, y: undefined };

        if (document.body.ontouchstart !== undefined) {
            canvas.ontouchstart = function (e) {
                let x = e.touches[0].clientX;
                let y = e.touches[0].clientY;
                this.firstDot = ctx.getImageData(0, 0, canvas.width, canvas.height);
                saveData(this.firstDot);
                painting = true;

                lastPoint = { "x": x, "y": y };
                ctx.save();
                drawCircle(x - offsetLeft, y - offsetTop, 0);
            };
            canvas.ontouchmove = function (e) {
                if (painting) {
                    let x = e.touches[0].clientX;
                    let y = e.touches[0].clientY;
                    let newPoint = { "x": x, "y": y };
                    drawLine(lastPoint.x - offsetLeft, lastPoint.y - offsetTop, newPoint.x - offsetLeft, newPoint.y - offsetTop, clear);
                    lastPoint = newPoint;
                }
            };

            canvas.ontouchend = function () {
                painting = false;
            }
        } else {
            canvas.onmousedown = function (e) {
                this.firstDot = ctx.getImageData(0, 0, canvas.width, canvas.height);
                saveData(this.firstDot);
                painting = true;
                let x = e.clientX;
                let y = e.clientY;
                lastPoint = { "x": x, "y": y };
                ctx.save();
                drawCircle(x - offsetLeft, y - offsetTop, 0);
            };
            canvas.onmousemove = function (e) {
                if (painting) {
                    let x = e.clientX;
                    let y = e.clientY;
                    let newPoint = { "x": x, "y": y };
                    drawLine(lastPoint.x - offsetLeft, lastPoint.y - offsetTop, newPoint.x - offsetLeft, newPoint.y - offsetTop, clear);
                    lastPoint = newPoint;
                }
            };

            canvas.onmouseup = function () {
                painting = false;
            };

            canvas.mouseleave = function () {
                painting = false;
            }
        }
    }

    function drawCircle(x, y, radius) {
        ctx.save();
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fill();
        if (clear) {
            ctx.clip();
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.restore();
        }
    }

    function drawLine(x1, y1, x2, y2) {
        ctx.lineWidth = lWidth;
        ctx.lineCap = "round";
        ctx.lineJoin = "round";
        if (clear) {
            ctx.save();
            ctx.globalCompositeOperation = "destination-out";
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
            ctx.closePath();
            ctx.clip();
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.restore();
        } else {
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
            ctx.closePath();
        }
    }

    range.onchange = function () {
        lWidth = this.value;
    };

    eraser.onclick = function () {
        clear = true;
        this.classList.add("active");
        brush.classList.remove("active");
    };

    brush.onclick = function () {
        clear = false;
        this.classList.add("active");
        eraser.classList.remove("active");
    };

    reSetCanvas.onclick = function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        setCanvasBg('white');
    };

    save.onclick = function () {
        let imgUrl = canvas.toDataURL("image/png");
        let saveA = document.createElement("a");
        document.body.appendChild(saveA);
        saveA.href = imgUrl;
        saveA.download = "zspic" + (new Date).getTime();
        saveA.target = "_blank";
        saveA.click();
    };

    function getColor() {
        for (let i = 0; i < aColorBtn.length; i++) {
            aColorBtn[i].onclick = function () {
                for (let i = 0; i < aColorBtn.length; i++) {
                    aColorBtn[i].classList.remove("active");
                    this.classList.add("active");
                    activeColor = this.style.backgroundColor;
                    ctx.fillStyle = activeColor;
                    ctx.strokeStyle = activeColor;
                }
            }
        }
    }

    let historyDeta = [];

    function saveData(data) {
        (historyDeta.length === 10) && (historyDeta.shift());
        historyDeta.push(data);
    }

    undo.onclick = function () {
        if (historyDeta.length < 1) return false;
        ctx.putImageData(historyDeta[historyDeta.length - 1], 0, 0);
        historyDeta.pop()
    };

Answer 1

https://blog.csdn.net/cysear/article/details/89185239