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

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

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

用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>

<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>