canvas导出框选部分，位置不对，大小不对

永远爱魏佳

已于 2022-08-26 19:31:43 修改

阅读量624

点赞数 1

分类专栏：前端文章标签： javascript 前端 html5

于 2022-08-26 19:18:00 首次发布

本文链接：https://blog.csdn.net/Lsong940/article/details/126549051

版权

如果你的canvas是被缩放了的，导出图片需要进行比例缩放

在这里插入图片描述
getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置

const bbox = canvas.getBoundingClientRect();
const widthRatio = canvas.width / bbox.width;
const heightRatio = canvas.

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

永远爱魏佳

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas导出框选部分，位置不对，大小不对

canvas导出框选部分，错位大小不对
复制链接

扫一扫

专栏目录

vue+canvas实现区域框选功能

qq_42750581的博客

02-10

1465

canvas手写的一个可缩放框选图片的功能

canvas标定选区

天边那朵云的博客

01-14

724

以下代码只有设置部分操作部分在polygon-operation <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> canvas {

参与评论您还未登录，请先登录后发表或查看评论

canvas绘制的内容在高清屏中模糊以及错乱问题。

Elephant_H的博客

05-21

1810

最近在做一个h5游戏的时候，用到了Phaser.js这个游戏引擎，可以将游戏的所有过程全部放在一个canvas里，在开发的过程中，发现正常切出来的图放在canvas里会变得模糊，网上有很多关于这个问题的文章，解决方案大致是使用phaser.js生成canvas标签时传进的height、width参数要在原先基础上乘以设备的dpr: var game = new Phaser.Game(width...

canvas框选区域

weixin_41449836的博客

01-25

539

HTML： <canvas id="exa" width="1920" height="1080" style="background:url(./image/8.jpg) no-repeat; background-size: 100%;"></canvas> SCRIPT： var e=[[210,201,275,265,2],[568,248,6...

在图片上进行框选区域

qq_43592064的博客

05-08

3234

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>框选</title> ...

Canvas裁剪区域

Wangdanting123的博客

07-01

2247

Canvas裁剪区域

Eclipse_Swt_Jface_核心应用_部分19

10-09

7.5.4 设置控件的相对位置 115 7.6 StackLayout（堆栈式布局） 115 7.7 自定义布局管理器 117 7.7.1 布局的基本原理 117 7.7.2 布局计算的常用方法 118 7.7.3 自定义布局类（BorderLayout） 119 7.8 ...

vue +vant 适合手机端上传图片图片实现了上传、压缩、旋转图片

01-20

压缩过程涉及计算合适的压缩比例（ratio），调整Canvas的尺寸，然后将Canvas的内容导出为新的base64编码的图片。这里的关键是使用`canvas.toDataURL()`方法来创建压缩后的图片数据。最后，将处理好的图片上传到...

CSD-3464

03-07

例如，标签的href属性指定链接的目标地址，的src属性指定图片源，的type属性定义输入字段的类型（如文本、密码、复选框等）。 4. CSS与HTML结合：虽然HTML专注于内容结构，但为了实现样式和布局，通常会配合使用CSS...

软件界面设计工具_3款合集

06-29

使用可选的canvas向导显示可用的屏幕空间。通过文本框与书签对您的设计进行注释。为每个设计添加说明。选择色彩主题以避免实际功能窗口的混淆。图标为图标面板提供快速的访问方式。工程间可共享常用...

lottie-web，一个绘制动画帧不错的选择

05-25

renderer: 'svg', // 渲染方式可选 svg 或 canvas loop: true, // 是否循环播放，默认为 false autoplay: true, // 是否自动播放，默认为 true path: '...

ExtDesigner for extjs3.0使用帮助文档.pdf

12-23

- **Positioning Components**：可以通过鼠标拖动来调整组件的位置，也可以通过设置精确坐标来定位。 - **Layout Options**：选择合适的布局策略，例如使用表布局（Table Layout）或绝对定位（Absolute Positioning...

KODExplorer 芒果云-资源管理器

07-16

解决canvas问题 - 文件编辑器,载入loading去掉 - 删除错误时，或上传错误时也刷新目录。删除提示颜色错误 - 对话框右键点击右键菜单隐藏修复 - 手机端 touch =双击 - 文件列表 explorer 右键不清除选才· - ...

封装canvas选择区域的组件

最新发布

sfyjknvcx的博客

10-17

627

大家好，我是南宫，最近我刚完成了一个canvas相关组件的封装。我个人其实很怕canvas和地图，就感觉这里有很复杂的操作，搞不懂，所以这次封装完了以后，决定写一篇博客来记录。首先我先简单介绍一下这个组件的功能，然后分布介绍思路并列出代码，最后如果有需要的小伙伴，可以联系我获取完整代码。

canvas画板之绘画元素的框选

weixin_44719258的博客

12-06

1219

canvas画板之绘画元素的框选，可以点击元素进行框选，并按住手柄进行缩放移动，且可以点击backspace键删除元素

canvas绘制图片，并标注框选出指定坐标位置的目标

Bobo

01-26

3000

将图片绘制到canvas画布上，并标出指定坐标位置的目标本篇文章介绍canvas绘制图片背景，并通过读取坐标信息对每个坐标对应目标进行标注框选，实现页面展示效果。

Canvas：在canvas区域内双击会选中整个canvas的问题解决办法

任她雨雪风晴

03-25

2002

最近接触到canvas的一个项目，很容易的一个效果，点击canvas绘制选中框，其中当点击速度过快时，就会选中整个canvas，这点很苦恼！解决办法：使用onselectstart="return false;" <canvas class="canvas" width="500px" height="500px" id="canvas" onselectstart="return ...

canvas实现框选

09-15

要在Canvas上实现框选功能，可以按照以下步骤进行操作： 1. 监听鼠标事件：使用`mousedown`、`mousemove`和`mouseup`等事件来捕获鼠标在Canvas上的操作。 2. 记录起始点：在鼠标按下时，记录下鼠标的坐标作为框选的起始点。 3. 绘制选择框：在鼠标移动过程中，根据鼠标的当前位置和起始点的位置计算出选择框的宽度和高度，并在Canvas上绘制一个边框矩形来表示选择框。 4. 确定选中元素：在鼠标松开时，根据选择框的位置和大小，判断Canvas上哪些元素被选择到。下面是一个示例代码，可以帮助你理解如何实现这个功能： ```javascript // 获取Canvas元素 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 记录起始点和选择框的位置 let startX, startY, width, height; // 保存所有可选元素的位置 const elements = [ { x: 50, y: 50, width: 50, height: 50 }, { x: 150, y: 100, width: 50, height: 50 }, { x: 200, y: 200, width: 100, height: 100 } ]; // 监听鼠标事件 canvas.addEventListener('mousedown', (e) => { startX = e.clientX - canvas.offsetLeft; startY = e.clientY - canvas.offsetTop; }); canvas.addEventListener('mousemove', (e) => { if (startX && startY) { width = e.clientX - canvas.offsetLeft - startX; height = e.clientY - canvas.offsetTop - startY; // 清空Canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制选择框 ctx.strokeStyle = 'blue'; ctx.strokeRect(startX, startY, width, height); } }); canvas.addEventListener('mouseup', () => { // 确定选中元素 const selectedElements = elements.filter((element) => { return element.x >= startX && element.x + element.width <= startX + width && element.y >= startY && element.y + element.height <= startY + height; }); // 打印选中元素 console.log(selectedElements); // 清空选择框 startX = null; startY = null; width = null; height = null; }); ``` 在上面的代码中，我们使用`mousedown`事件记录起始点，使用`mousemove`事件计算选择框的位置和大小，并在Canvas上绘制选择框。在`mouseup`事件中，我们根据选择框的位置和大小判断哪些元素被选中，并打印出来。你可以根据自己的需求进行修改和扩展，比如添加元素的绘制、多选等功能。希望对你有所帮助！如果还有其他问题，请随时提问。