HTML5画布自适应屏幕之后，如何获取屏幕中画布图片的坐标区域!急

Posted 2023-05-05

(function()
var c=document.getElementById("mycanvas");
var context = c.getContext("2d");
var c2= document.createElement('canvas');
c2.width=800;
c2.height=480;
var bisai=new Image();
var bg=new Image();
var context2 = c2.getContext("2d");
window.onload=function()
context2.drawImage(bg,0,0);
context2.drawImage(bisai,bg.width/2-bisai.width/2,bg.height/2-bisai.height/2);
setInterval(resizeCanvas, 1);
c2.addEventListener("mousedown",doMouseDown,false);

bg.src='img/bg.png'
bisai.src='img/517.png';
function resizeCanvas()
c.setAttribute("width",window.innerWidth );
c.setAttribute("height",window.innerHeight);
width= c.width;
context.drawImage(c2,0, 0,width, width*(c2.height/c2.width););


function doMouseDown(event)
x = event.pageX ;
y = event.pageY ;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
//自适应之前（静态页面）我是直接判断屏幕坐标区域来实现鼠标点击事件。自适应之后我该如何获取画布中的图片坐标区域？
if(x>10&&10+bisai.width&&y>10&&y<10+bisai.height)
//context.drawImage(bisai,bg.width/2-bisai.width/2,bg.height/2-bisai.height/2);

)();

参考技术A 可以用 position 这方法去取得！
还不懂可私我，我来详细跟你说明

HTML 视频中章节的自动缩略图/屏幕截图

【中文标题】HTML 视频中章节的自动缩略图/屏幕截图

【英文标题】：Automatic Thumbnails/Screenshots for Chapter in HTML Video

【发布时间】：2017-01-26 18:12:25

【问题描述】：

我发现了一些示例，人们使用画布和 javascript 对正在运行的视频进行多张截图。 您可以查看这些示例 here 或 here。

代码设置时间间隔，将当前时间帧绘制到画布上并使用它来创建屏幕截图。

我想知道是否可以使用类似的技术为视频的章节自动创建一种预览。 但这需要在视频开始之前抓取一堆屏幕截图。 我没有实现这一点，所以我想知道它是否可能。

我知道可以为章节使用预先截取的屏幕截图，但我想自动化这个过程。

提前感谢您的回答。

【参考方案1】：

这在理论上可以通过使用video.currentTime跳转到视频中的特定时间（比如每10秒），等待帧可用（使用progress事件），将帧绘制到画布（ canvas.drawImage) 并以某种方式存储它（比如一组具有image.src = canvas.toDataURL 的图像）。

但是，此过程需要时间，因为至少需要将视频的相关部分加载到浏览器中，以便抓取帧。在此过程中，视频将无法播放，因为它正在跳到不同的帧。

这种行为通常是不可接受的，但它确实取决于您的具体用例。

【讨论】：

提示：使用两个<video> 元素：一个供用户观看，另一个用于截屏。

其他提示：如果服务器可以处理，您甚至可以使用更多<video> 元素，并将视频的src 设置为playback range。绘制完视频元素后不要忘记删除它。此外，为了内存，存储 Blob 比存储 dataURI 字符串版本更好。

谢谢，我也想出了两个想法，但在实施时遇到了问题。我不知道进度事件。我会试试看，哪一个运行最流畅。

我在这里做了一个演示，看看这个想法是否可行：codepen.io/giladaya/pen/ygzWKN 它使用oncanplay 事件（不是progress），它可以工作，但它很诡异