Canvas缩放图像

Posted 2020-06-19 -南方姑娘-

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Canvas缩放图像相关的知识，希望对你有一定的参考价值。

<body>
<canvas id="canvas"></canvas>
<input type="range" id="scale_range" min="0.5" max="3" step="0.01" value="1.0">
<script>
    slider = document.getElementById("scale_range");
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    var image = new Image();
    window.onload = function(){
        canvas.width = 500;
        canvas.height = 500;
        image.src = "/a.png";
        var scale = slider.value;
        image.onload = function(){
            drawByScale(scale);
            slider.onmousemove = function(){
                scale = slider.value;
                drawByScale(scale);
            }

        }
    }
    function drawByScale(scale){
        var imageWidth = canvas.width*scale;
        var imageHeight = canvas.height*scale;
        //var sx = imageWidth/2-canvas.width/2;
        //var sy = imageHeight/2-canvas.height/2;
        var dx = canvas.width/2-imageWidth/2;
        var dy = canvas.height/2-imageHeight/2;
        context.clearRect(0,0,canvas.width,canvas.height);
        context.drawImage(image,dx,dy,imageWidth,imageHeight);
    }
</script>
</body>

以上是关于Canvas缩放图像的主要内容，如果未能解决你的问题，请参考以下文章

Canvas缩放图像

HTML5 Canvas ~ 使用绘制元素平滑快速缩放，而不是图像 ~ 如何？

使用canvas进行图像编辑

HTML5 Canvas 翻译、旋转、缩放

jscanvas画图放大是文字不变