使用canvas内置api完成图片的缩放平移和导出和添加提示

原创

已于 2024-03-31 20:05:59 修改 · 671 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2024-03-31 20:00:38 首次发布

最近挺忙的，几乎没有时间去更新博客，今天正好在学习新东西，正好和大家分享一下。
最近要做一个使用canvas完成图片平移，缩放，添加标注的需求，完成的效果大概如下：

使用canvas内置api完成图片的缩放平移和导出和添加提示

最终的代码如下，这是使用canvas内置api完成的，缩放用到的是scale方法，平移用的是canvas的translate方法，代码中每个地方会有对应的注释，代码都是自己写的，如果又不懂得可以留言。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
   
   
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .content {
   
   
            position: relative;
            margin: 50px;
            height: 500px;
            border: 5px solid red;
            overflow: hidden;
        }

        #canvas {
   
   
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid pink;
            cursor: grab;
        }

        .btnx {
   
   
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: pink;
            height: 50px;
            cursor: pointer;
        }

        .btn {
   
   
            text-align: center;
            flex: 1;
        }

        .btn2 {
   
   
            display: none;
        }

        .btn5 {
   
   
            display: none;
        }
    </style>
</head>

<body>
    <div class="content">
        <canvas id="canvas" width="500" height="400"></canvas>
        <div class="btnx">
            <div class="btn btn1">裁剪</div>
            <div class="btn btn2">取消</div>
            <div class="btn btn3">放大x0.5</div>
            <div class="btn btn4">缩小x0.5</div>
            <div class="btn btn5">导出</div>
            <div class=