Thay đổi kích cỡ khung hình bằng vải js

Question

Ứng dụng cho phép người dùng lưu thiết kế và đăng lên để người dùng khác có thể xem sau.

Canvas gốc được lưu với tỷ lệ chiều rộng = 700 và chiều cao = 600. Nhưng khi hiển thị canvas, tôi muốn thay đổi kích thước khung hình để vừa với kích thước của (350,300). một nửa bản gốc. Nhưng nếu tôi trực tiếp áp dụng các kích thước và chiều rộng tải setWidth() và setHeight() nó tải với tỷ lệ ban đầu.

Tất cả những gì tôi muốn là hiển thị canvas có kích thước mới.

Answer 1

Trước đây đã trả lời here.

Tôi không chắc chắn những gì bạn đã cố gắng, nhưng

var canvas = document.getElementsByTagName('canvas')[0]; 
canvas.width = 800; 
canvas.height = 600; 

nên hoạt động tốt.

Answer 2

Nếu bạn đang sử dụng thư viện fabric.js, điều đó là không đủ.

Xét rằng 'vải' là đối tượng fabric.js Ví dụ, bạn nên làm điều này để tránh hiện vật distorsion:

canvas.setWidth(<desired width>); 
canvas.setHeight(<desired height>); 
canvas.calcOffset();