HTML5 Canvas上传的带有按钮编码的图像缩放/缩放

Question

我对此很不满意，并试图创建2层。 我的顶层是固定图像，底层是上传的图像。 我希望能够操纵底部的图像。 我有一个代码

http://www.html5canvastutorials.com/labs/html5-canvas-scaling-a-drawing-with-plus-and-minus-buttons/#comment-19246

但我无法对其进行更改，以使这些按钮将应用于已上传的图像。

这是我在html端拥有的东西，它创建2层并将固定图像上传到顶部：

<input type="file" id="files" name="files[]" multiple onchange="handleFileSelect(this.files)"/>

        <div>
            <input type="button" id="plus" value="+"><input type="button" id="minus" value="-">
        </div>




<div id="canvasesdiv" style="position:relative; width:400px; height:300px">
<canvas id="layer2"
style="z-index: 1;
position:absolute;
left:0px;
top:0px;
" height="300px" width="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

<canvas id="layer1"
style="z-index: 2;
position:absolute;
left:0px;
top:0px;
" height="300px" width="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas></div>



<script type="text/javascript">
var c=document.getElementById("layer1");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src="assets/images/testsquare.png";
</script>

这是我在脚本方面要进行的更改：

    <script>
        function draw(scale, translatePos){
            var canvas = document.getElementById("layer1");
            var context = canvas.getContext("2d");

            // clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

            context.save();

            context.restore();
        }

        window.onload = function(){
            var canvas = document.getElementById("layer1");

            var translatePos = {
                x: canvas.width / 2,
                y: canvas.height / 2
            };

            var scale = 1.0;
            var scaleMultiplier = 0.8;
            var startDragOffset = {};
            var mouseDown = false;

            // add button event listeners
            document.getElementById("plus").addEventListener("click", function(){
                scale /= scaleMultiplier;
                draw(scale, translatePos);
            }, false);

            document.getElementById("minus").addEventListener("click", function(){
                scale *= scaleMultiplier;
                draw(scale, translatePos);
            }, false);

            // add event listeners to handle screen drag
            canvas.addEventListener("mousedown", function(evt){
                mouseDown = true;
                startDragOffset.x = evt.clientX - translatePos.x;
                startDragOffset.y = evt.clientY - translatePos.y;
            });

            canvas.addEventListener("mouseup", function(evt){
                mouseDown = false;
            });

            canvas.addEventListener("mouseover", function(evt){
                mouseDown = false;
            });

            canvas.addEventListener("mouseout", function(evt){
                mouseDown = false;
            });

            canvas.addEventListener("mousemove", function(evt){
                if (mouseDown) {
                    translatePos.x = evt.clientX - startDragOffset.x;
                    translatePos.y = evt.clientY - startDragOffset.y;
                    draw(scale, translatePos);
                }
            });

            draw(scale, translatePos);
        };
    </script>

任何帮助将不胜感激

Answer 1

您的draw方法当前使用using document.getElementById方法来检索layer2画布并对其进行操作。 您的问题尚不完全清楚（在代码中包含handleFileSelect方法可能会有所帮助），但我认为您需要更改draw方法，以便它检索layer2画布，大概是绘制上载图像的那一层至：

function draw(scale, translatePos){

    // Get the layer2 canvas element in which the user uploaded image has been drawn 
    var canvas = document.getElementById("layer2");
    var context = canvas.getContext("2d");

    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.save();

    context.restore();
}