drawImage và thay đổi kích thước để Canvas

Tôi có một hình ảnh đó là 1836 x 3264 Tôi muốn drawImage() để Canvas và thay đổi kích thước 739 x 1162.drawImage và thay đổi kích thước để Canvas

Sau khi đọc các tài liệu hướng dẫn Tôi nghĩ điều này có thể được thực hiện như sau:

ctx.drawImage(image, 0, 0, 739, 1162);

tôi cũng đã cố gắng:

ctx.drawImage(image, 0, 0, 1836, 3264, 0, 0, 739, 1162);

Cả hai chỉ hiển thị một phần nhỏ của hình ảnh đầy đủ thay vì thu hẹp nó xuống.

Làm cách nào để vượt qua các giá trị để đổi kích thước từ 1836 x 3264 -> 739 x 1162?

Nguồn

2013-03-03 Philip Kirkbride

Điều này sẽ giúp: http: // stackoverflow. com/questions/2303690/resizing-an-image-in-an-html5-canvas – bfavaretto

Những gì bạn có vẻ chính xác, vì vậy bạn có thể kiểm tra kỹ lỗi đánh máy ở đâu đó.

[Edit: thêm suy nghĩ]: Liệu hình ảnh của bạn thực sự 1836x3264 và không 3264x1836]

mã ở đây đang làm việc và một Fiddle:. http://jsfiddle.net/m1erickson/MLGr4/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    img=new Image(); 
    img.onload=function(){ 
     canvas.width=400; 
     canvas.height=300; 
     ctx.drawImage(img,0,0,img.width,img.height,0,0,400,300); 
    } 
    img.src="http://www.onestopwebmasters.com/wp-content/uploads/2011/06/eitai-bridge.jpg"; 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=100 height=100></canvas> 
</body> 
</html>

Nguồn

2013-03-04 02:30:02 markE

Mã cảm ơn đã đúng. Nó chỉ là một trục trặc trong cách hệ thống điện thoại di động đã được xử lý vải. –

@PhilipKirkbride Bạn có thể cho chúng tôi biết trục trặc điện thoại di động này là gì không và bạn đã sửa nó như thế nào? – palsch

Câu trả lời này đã giúp tôi nhận ra rằng tôi đã đặt 'canvas.style.width' và' height' thay vì 'canvas.width'. Việc thay đổi điều đó đã giúp hiển thị tỷ lệ hiển thị 'ctx.drawImage' như mong đợi, thay vì kéo dài mà nó đang thực hiện trước khi canvas có thuộc tính thứ nguyên. – crowjonah

drawImage và thay đổi kích thước để Canvas

Trả lời

Các vấn đề liên quan