每一个你不满意的现在,都有一个你不努力的曾经. 网站首页 > js
canvas加载图片缩小比例显示并标注矩形区域(vue)
发布时间:2023-07-07 16:03:23 修改时间:2023-07-07 16:03:23 阅读:2801 评论:0 0
<template> <canvas ref="myCanvas"></canvas> </template> <script> export default { mounted() { this.$nextTick(() => { this.loadImage(); }); }, methods: { loadImage() { const canvas = this.$refs.myCanvas; const ctx = canvas.getContext('2d'); const image = new Image(); image.src = 'path/to/your/image.jpg'; // 将"path/to/your/image.jpg"替换为你的图片路径 image.onload = () => { const scale = 0.5; // 设置缩放比例为0.5,即缩小一半 const scaledWidth = image.width * scale; // 缩放后的宽度 const scaledHeight = image.height * scale; // 缩放后的高度 canvas.width = scaledWidth; // 设置Canvas宽度为缩放后的宽度 canvas.height = scaledHeight; // 设置Canvas高度为缩放后的高度 ctx.drawImage(image, 0, 0, scaledWidth, scaledHeight); // 绘制缩放后的图片 const rectangles = [ { x: 50, y: 50, width: 100, height: 100 }, { x: 200, y: 100, width: 150, height: 80 }, // 添加更多的矩形对象 ]; ctx.strokeStyle = 'red'; // 设置边框颜色 ctx.lineWidth = 1; // 设置线条宽度为1 ctx.setLineDash([2, 2]); // 设置虚线样式,[2, 2]表示实线长度为2,空白长度为2 for (let i = 0; i < rectangles.length; i++) { const rect = rectangles[i]; ctx.strokeRect( rect.x * scale, rect.y * scale, rect.width * scale, rect.height * scale ); // 使用缩放后的尺寸绘制边框 } }; }, }, }; </script>
回复列表
关键字词:nbsp,span,1px,style,font-size,const
上一篇:css常用属性