Có thể hiển thị bất kỳ phần nào của hình ảnh trong img thẻ (có pixel) qua JavaScript không?lấy một phần của hình ảnh bằng JavaScript
Tôi sẽ có hình ảnh lớn chuẩn bị (ví dụ 32x320 pixel) và vị trí bắt đầu được xác định (X, Y, ví dụ 0,32) và chiều rộng/chiều cao (ví dụ 32,32) và muốn tập lệnh hiển thị thứ hai (32x32 pixel) một phần của hình ảnh chính.
Bạn có thể sử dụng thuộc tính CSS cho điều này và thay đổi chúng thông qua JS. Đặt hình ảnh làm nền cho phần tử có kích thước mong muốn và điều chỉnh vị trí của nó với vị trí nền để phần hiển thị chính xác. Một số người gọi nó là CSS sprites.
+1 Bạn thậm chí không cần phải sử dụng DIV. Tôi sử dụng PNG trong suốt và đặt hình nền của nó, hoạt động tốt cho mục đích này nhưng cho tôi tùy chọn sử dụng nội tuyến giả tạo nếu tôi muốn mà không phải đối phó với phao, v.v. – Robusto
bất kỳ yếu tố nào. Sử dụng một phần tử img âm thanh hơi bẩn với tôi, mặc dù tôi có thể sử dụng display: inline-block; nếu tôi muốn các phần tử chảy với văn bản. –
Để mang lại cho bạn nhiều tùy chọn, bạn luôn có thể sử dụng canvas HTML5 và vẽ lại hình ảnh nếu cần. Bạn có thể tìm thấy một hướng dẫn hay về cách thực hiện điều này tại đây: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images Phương pháp CSS sprite sẽ thích hợp hơn vì IE không hỗ trợ canvas.
bạn thậm chí có thể lưu hình ảnh bạn đã vẽ dưới dạng url dữ liệu http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/ –
Bản sao có thể có của [Làm cách nào tôi có thể hiển thị chỉ một phần của hình ảnh trong HTML/CSS?] (Https://stackoverflow.com/questions/57725/how-can-i-display-just-a-portion- of-an-image-in-html-css) – vaxquis
Trong khi câu hỏi được tham chiếu là về html/css, đây là cho JavaScript. – Alper
bạn có biết rằng, vì câu hỏi của bạn là hoàn toàn về JavaScript DOM và bản thân DOM chỉ là một chương trình phụ trợ cho HTML/CSS, câu hỏi của bạn * là * về HTML/CSS? Câu trả lời được chấp nhận ở đây hướng bạn đến CSS vì lý do đó. Bạn * không thể * làm JS DOM * mà không * lấy tài khoản HTML/CSS - ngay cả phần tử canvas HTML5 được đề cập trong câu trả lời khác chỉ là - một phần tử tài liệu HTML5. – vaxquis