xuziwen127
2019-01-04 22:38
采纳率: 16.7%
浏览 4.7k
已采纳

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

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

图片说明

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

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

2条回答 默认 最新

  • 天际的海浪 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条)

相关推荐 更多相似问题