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

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

图片说明

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

2个回答

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

xuziwen127
xuziwen127 OK,thank you,昨天搜到这个方法实现了
接近 2 年之前 回复
<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>
立即提问
相关内容推荐