【问题标题】:canvas.drawImage() renders only the top half of the source imagecanvas.drawImage() 仅渲染源图像的上半部分
【发布时间】:2019-08-04 01:29:21
【问题描述】:

我正在尝试从头开始制作一个 JS 图像裁剪器。我的裁剪部分非常好,但是当我尝试使用drawImage() 将图像的裁剪部分渲染到画布中时,输出仅显示图像的上半部分。知道可能出了什么问题吗?

CodePen 链接:https://codepen.io/virtuoso/full/MxrWrN

【问题讨论】:

  • 只是一个 FIY:你的图像没有加载到你的 codepen 中。我在浏览器中看到标准图像未找到图标。
  • @Mathyn 我也看到了。但是当我切换到编辑模式并刷新预览 iframe 时,它​​起作用了..
  • @JackU 这是不同的,因为它具有<canvas> 元素集的widthheight 属性。我的问题是我没有设置这些属性。

标签: javascript html canvas drawimage


【解决方案1】:

从这篇文章中找到了解决方案:canvas drawimage draw zoomed image

问题是我正在更改 <canvas> 元素的 style 属性来设置它的宽度和高度,而我应该使用它的 widthheight 属性来代替。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-16
    • 1970-01-01
    相关资源
    最近更新 更多