canvas.drawImage将裁剪的图像吹得不成比例

Question

渲染以下图像时（右键单击+查看图像以查看完整尺寸）：

大小为4800x320，其中包含html5 // Set up the photo request. NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:PHOTO_URL, pass_venue_ID, PHOTO_CLIENT_ID, PHOTO_CLIENT_SECRET]]; NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url]; NSOperationQueue *queue = [[NSOperationQueue alloc] init]; // Begin the asynchromous image loading. [NSURLConnection sendAsynchronousRequest:urlRequest queue:queue completionHandler:^(NSURLResponse *response, NSData *data, NSError *error) { if (error == nil) { // Convert the response data to JSON. NSError *my_error = nil; NSDictionary *feed = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableLeaves error:&my_error]; // Check to see if any images exist // for this particular place. int images_check = [[NSString stringWithFormat:@"%@", [[[feed objectForKey:@"response"] valueForKey:@"photos"] valueForKey:@"count"]] intValue]; if (images_check > 0) { // Download all the image link properties. images_prefix = [[[[feed objectForKey:@"response"] valueForKey:@"photos"] valueForKey:@"items"] valueForKey:@"prefix"]; images_suffix = [[[[feed objectForKey:@"response"] valueForKey:@"photos"] valueForKey:@"items"] valueForKey:@"suffix"]; images_width = [[[[feed objectForKey:@"response"] valueForKey:@"photos"] valueForKey:@"items"] valueForKey:@"width"]; images_height = [[[[feed objectForKey:@"response"] valueForKey:@"photos"] valueForKey:@"items"] valueForKey:@"height"]; // Set the image number label. number_label.text = [NSString stringWithFormat:@"1/%lu", (unsigned long)[images_prefix count]]; // Download up to 5 images. images_downloaded = [[NSMutableArray alloc] init]; // Set the download limit. loop_max = 0; if ([images_prefix count] > 5) { loop_max = 5; } else { loop_max = [images_prefix count]; } for (NSUInteger loop = 0; loop < loop_max; loop++) { // Create the image URL. NSString *image_URL = [NSString stringWithFormat:@"%@%@x%@%@", images_prefix[loop], images_width[loop], images_height[loop], images_suffix[loop]]; // Download the image file. NSData *image_data = [NSData dataWithContentsOfURL:[NSURL URLWithString:image_URL]]; // Store the image data in the array. [images_downloaded addObject:image_data]; } // Load the first image. [self load_image:image_num]; } else if (images_check <= 0) { // error... } } else { // error } }]; ，并尝试从中裁剪部分480x320图像，画布将图像向上扫描。

这是我的代码：

canvas.drawImage()

另外，当我将图像绘制成较小的比例时，它突然适合：

var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'my-canvas');
canvas.style.width = 480;
canvas.style.height = 320;
canvas.style.display = 'block';

document.body.appendChild(canvas);

var img=document.createElement('img');
img.src='http://cdn.cocimg.com/bbs/attachment/Fid_14/14_29173_56b5563d9a81a86.png';
img.onload = function () {
  var c=document.getElementById('my-canvas');
  var ctx=c.getContext('2d');
  ctx.drawImage(img,480,0,480,320,0,0,480,320);
}

有谁知道为什么会这样？

Answer 1

画布＆＃39;默认位图大小为300x150像素。设置 CSS 大小不会改变位图大小。位图直接在元素上设置了自己的宽度/高度属性/属性。如果不是，则将拉伸位图以填充元素CSS大小。

更改这些：

canvas.style.width = 480;
canvas.style.height = 320;

到

canvas.width = 480;
canvas.height = 320;

您还可以设置代码以重复使用上下文：

//var c=document.getElementById('my-canvas'); // you already have this as canvas
var ctx=canvas.getContext('2d');              // global/parent scope

var img=document.createElement('img');
img.src='http://cdn.cocimg.com/bbs/attachment/Fid_14/14_29173_56b5563d9a81a86.png';
img.onload = function () {
  ctx.drawImage(img,480,0,480,320,0,0,480,320);
}