weixin_39996035
2021-01-07 05:58 阅读 0

drawImage with crop area

drawImage is broken when using a crop area. Rather than drawing a small portion of the image scaled up it will scale the image down and add vertical and horizontal stripes to the end of the drawing area. Here is an example of code that can reproduce this. If you need the image that I am using just let me know.


var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var context = canvas.getContext('2d');
var image = new Image();
image.onload = function(){
  context.drawImage(image,0,0,2000,2000,0,0,600,150);
}
image.src = 'image.jpg';

该提问来源于开源项目:phoboslab/Ejecta

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

7条回答 默认 最新

  • weixin_39561673 weixin_39561673 2021-01-07 05:58

    Parameters in wrong order, maybe? I assume your image is not 2000px wide and high? Parameters are:

    
    .drawImage(
        image, 
        sourceX, sourceY, sourceWidth, sourceHeight,
        destinationX, destinationY, destinationWidth, destinationHeight
    )
    

    I know drawImage is not exactly implemented to the spec. Specifically, this part is missing:

    When the source rectangle is outside the source image, the source rectangle must be clipped to the source image and the destination rectangle must be clipped in the same proportion.

    But imho that's more a problem the user of the API should account for. Firefox (as of version 24) even throws an error when the source region is outside the image.

    点赞 评论 复制链接分享
  • weixin_39996035 weixin_39996035 2021-01-07 05:58

    Here is the image that I was testing with http://i.imgur.com/DKLHaJl.jpg Please try the example with this photo, the photo isn't drawn at any logical sized based on what I have passed in. It is scaled way down and vertical and horizontal banning is happening on the edges. I'm not sure why it isn't working but what it is doing doesn't seem like what is intended even if you are not implementing clipping.

    We would like to only draw a small portion of a much larger photo. This seems like the cleanest way to do this, if you don't support the clipping part I can make another call to do the clipping but the scaling is off and I'm not sure how to work around this.

    点赞 评论 复制链接分享
  • weixin_39669133 weixin_39669133 2021-01-07 05:58

    Take a close look 's example. The image you provided is both shorter and narrower than 2000px. This is going to cause you problems most likely.

    点赞 评论 复制链接分享
  • weixin_39996035 weixin_39996035 2021-01-07 05:58

    Why? I'm trying to scale this image up but crop it at 600x150.

    点赞 评论 复制链接分享
  • weixin_39669133 weixin_39669133 2021-01-07 05:58

    Then you didn't read 's post very closely. You reversed the source and target arguments.

    点赞 评论 复制链接分享
  • weixin_39669133 weixin_39669133 2021-01-07 05:58

    Think of it like this: you choose a region of the picture, in absolute pixels that you want to draw. This is the 4 source arguments. Then you draw that region via the target arguments, x and y define the position, and width and height can scale that region up or down.

    点赞 评论 复制链接分享
  • weixin_39996035 weixin_39996035 2021-01-07 05:58

    Thanks for questioning me, I was reading a few math equations wrong while thinking they should be doing something else. Got it all fixed up now.

    点赞 评论 复制链接分享

相关推荐