xuziwen127
xuziwen127
采纳率61.1%
2019-01-04 22:38 阅读 4.2k

有没有人知道h5怎么在一个img标签的图片上画个矩形框,还能随图片的放大缩小还保持原位置

5

最近遇到一个需求,就是前端需要在img图片上任意画框,就类似于QQ截图时候画框的那种功能,就类似于这样:

图片说明

而且可以画多个,还需要随着图片的放大缩小而改变比例,不能只在img标签上层画一个;
有没有大神推荐几个插件或者说说思路的。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    jslang 天际的海浪 2019-01-05 00:13

    用H5的canvas代替img啊,先把图片画到canvas里面,再在canvas里用strokeRect()方法画框

    <canvas id="canvasId"></canvas>
    <script type="text/javascript">
    var canvas = document.getElementById("canvasId");
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.src = "xxxxxxxxxxxxxx.jpg";
    img.onload = function () {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img,0,0);
        ctx.strokeStyle = "#f00";
        ctx.strokeRect(30,20,100,100);
        ctx.strokeRect(150,50,150,100);
    }
    </script>
    
    
    点赞 1 评论 复制链接分享
  • caozhy 从今以后生命中的每一秒都属于我爱的人 2019-01-04 23:54
    <script type="text/javascript">  
            functionload() {  
                canvas = document.getElementById("你的img");  
                ctx = canvas.getContext("2d");  
                            ctx.beginPath();  
                            ctx.moveTo(70,140);  
                            ctx.lineTo(140,70);  
                            ctx.stroke();  
            };  
    
    
    </script>
    
    点赞 评论 复制链接分享

相关推荐