HTML5：疯狂的画布drawImage大小 [英] HTML5: crazy canvas drawImage sizing

问题描述

我有下一个html模板：

 < div className =page> 
< video id =videoautoPlay /> 
< canvas id =canvas/> 
< div class =btn-wrapper> 
< button onClick = {this._takePhoto}>捕捉照片< / button> 
< / div> 
< / div> 
  

这是我的应用程序的屏幕截图。在顶部，您可以看到< video> 和底部< canvas /> ）。

问题：将< video /> 图片绘制到< canvas /> 系数：

  const canvas = document.getElementById（'canvas'），
 context = canvas.getContext ），
 video = document.getElementById（'video'）; 
 //问题：为什么？ 
 const widthCoef = 2.1，
 heigthCoef = 3; 
 context.drawImage（video，
 0，
 0，
 video.clientWidth * widthCoef，
 video.clientHeight * heightCoef，
 0，
 0，
 canvas.clientWidth，
 canvas.clientHeight）; 
  

问题： $ c>< video /> & < canvas /> 有相同的宽度/高度吗？

---

如果我做同样的但没有系数，像

  context.drawImage（video， video.clientWidth，video.clientHeight，0，0，canvas.clientWidth，canvas.clientHeight）; // OR 
 context.drawImage（video，0，0，video.clientWidth，video.clientHeight，0，0，video.clientWidth，video.clientHeight）; // OR 
 context.drawImage（video，0，0，canvas.clientWidth，canvas.clientHeight，0，0，canvas.clientWidth，canvas.clientHeight）; 
  

我收到放大的图片：

UPDATE

我的新调整大小版本：

  _resizeCanvas（）{
 const canvas = document.getElementById（'canvas'），
 video = document。 getElementById（'video'）; 
 const width = + window.getComputedStyle（video，null）.getPropertyValue（'width'）。replace（'px'，''），
 height = + window.getComputedStyle（video，null）。 getPropertyValue（'height'）。replace（'px'，''）; 
 video.width = width; 
 video.height = height; 
 canvas.width = width; 
 canvas.height = height; 
}，
  

UPDATE 2 - add fiddle example

这是我的小提琴示例

视频对象大小和画布大小之间的比率。

假设您的影片大小为（400 x 300）想要在大小（200 x 150）的画布上显示它。它可以通过：

  context.drawImage（video，0,0,200,150）; 
  

它会调整完整视频

但是，您正在使用 drawImage（）的剪切版本。前四个坐标参数描述剪切参数。例如，在以下情况下，它需要四分之一的完整视频：

  context.drawImage（video，0,0,200,150,0,0,200,150）; 
 





---

根据更新的问题进行编辑

em>

图片被剪裁，因为属性 canvas.clientWidth 和 canvas.clientHeight 大于 canvas.width 和 canvas.height 。这是因为CSS display：flex; 。要显示完整的图片使用：

  context.drawImage（video，0，0，canvas.width，canvas.height）; 
  

I have the next html template:

<div className="page">
    <video id="video" autoPlay/>
    <canvas id="canvas"/>
    <div class="btn-wrapper">
        <button onClick={this._takePhoto}>Snap Photo</button>
    </div>
</div>

Here is screenshot of my app. At the top you can see <video> and at the bottom <canvas/> (focus in devtools).

Problem: to draw <video/> picture to <canvas/> I should use this strange coefficients:

    const canvas = document.getElementById('canvas'),
          context = canvas.getContext("2d"),
          video = document.getElementById('video');
    //QUESTION: why?!
    const widthCoef = 2.1,
          heigthCoef = 3;
    context.drawImage(video, 
                      0, 
                      0, 
                      video.clientWidth * widthCoef, 
                      video.clientHeight * heightCoef, 
                      0, 
                      0, 
                      canvas.clientWidth, 
                      canvas.clientHeight);

Question: why I should use coefficients if <video/> & <canvas/> have the same width/height?

---

If I do the same but without coefficients, like

context.drawImage(video, 0, 0, video.clientWidth, video.clientHeight, 0, 0, canvas.clientWidth, canvas.clientHeight); //OR
context.drawImage(video, 0, 0, video.clientWidth, video.clientHeight, 0, 0, video.clientWidth, video.clientHeight); //OR
context.drawImage(video, 0, 0, canvas.clientWidth, canvas.clientHeight, 0, 0, canvas.clientWidth, canvas.clientHeight);

I get a zoomed picture:

UPDATE

My new resizing version:

_resizeCanvas() {
    const canvas = document.getElementById('canvas'),
        video = document.getElementById('video');
    const width = +window.getComputedStyle(video, null).getPropertyValue('width').replace('px', ''),
          height = +window.getComputedStyle(video, null).getPropertyValue('height').replace('px', '');
    video.width = width;
    video.height = height;
    canvas.width = width;
    canvas.height = height;
},

UPDATE 2 - add fiddle example

Here is my fiddle example

解决方案

Those magic coefficients correspond to the ratio between the video object size and the size of canvas.

Suppose, your video size is (400 x 300) and you want to show it on the canvas with size (200 x 150). It can be done just by:

context.drawImage(video,0,0,200,150);

It will resize full video to fit the canvas.

However, you are using clipping version of drawImage(). The first four coordinate arguments describe clipping parameters. For example in the following case it takes quarter of full video:

context.drawImage(video,0,0,200,150,0,0,200,150);

---

Edit according to updated question

The image is clipped, since properties canvas.clientWidth and canvas.clientHeight are larger than canvas.width and canvas.height. That happens because of CSS display: flex;. To show full image use:

context.drawImage(video, 0, 0, canvas.width, canvas.height);

这篇关于HTML5：疯狂的画布drawImage大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！