使用canvans将图片转为指定尺寸

予倾

已于 2022-04-06 15:40:14 修改

阅读量421

点赞数

分类专栏： js 文章标签： javascript 开发语言 ecmascript

于 2022-03-28 17:53:53 首次发布

本文链接：https://blog.csdn.net/QZ9420/article/details/123801409

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了一个使用HTML与Canvas结合的实例，展示了如何加载一张图片并将其按一定比例缩放后绘制到Canvas上。该过程涉及到了HTML页面结构的设计、CSS样式设置以及JavaScript中的图片加载与绘制逻辑。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <img id="scream" src="./平面封.jpg" alt="">
        <canvas id="myCanvas" width="800" height="800"></canvas>
    </div>
</body>
<style>
    #myCanvas {
        margin: 0;
        padding: 0;
        background-color: green;
    }
</style>
<script>
    var c = document.getElementById("myCanvas")
    var ctx = c.getContext("2d")
    var img = document.getElementById("scream")
    var qz = new Image()
    qz.src = img.src
    img.onload = function(){
        console.log(qz.width, qz.height)
        let w = qz.width
        let h = qz.height
        let bl = 1
        if (h > w) {
            w = w / 10 * 6
            h = h / 10 * 6
        }
        const x = (800 - w) / 2
        const y = (800- h) / 2
        ctx.drawImage(img, x, y , w, h)
    }
</script>
</html>