Hình ảnh Cắt/Cắt theo lập trình bằng cách sử dụng Javascript

Question

Có tài liệu/hướng dẫn nào về cách cắt hoặc cắt hình ảnh lớn để người dùng chỉ nhìn thấy một phần nhỏ của hình ảnh này không? Giả sử hình ảnh nguồn là 10 khung hình hoạt ảnh, được xếp chồng lên nhau từ đầu đến cuối để nó thực sự rộng. Tôi có thể làm gì với Javascript để chỉ hiển thị 1 khung hình động bất kỳ tại một thời điểm?

Tôi đã xem kỹ thuật "CSS Spriting" này nhưng tôi không nghĩ rằng tôi có thể sử dụng nó ở đây. Hình ảnh nguồn được tạo động từ máy chủ; Tôi sẽ không biết tổng chiều dài, hoặc kích thước của mỗi khung hình, cho đến khi nó trở lại từ máy chủ. Tôi hy vọng rằng tôi có thể làm điều gì đó như:

var image = getElementByID('some-id'); 

image.src = pathToReallyLongImage; 

// Any way to do this?! 
image.width = cellWidth; 
image.offset = cellWidth * imageNumber; 

Answer 1

Điều này có thể được thực hiện bằng cách kèm theo hình ảnh của bạn trong div "chế độ xem". Đặt chiều rộng và chiều cao trên div (theo nhu cầu của bạn), sau đó đặt position: relative và overflow: hidden trên đó. Hoàn toàn định vị hình ảnh của bạn bên trong nó và thay đổi vị trí để thay đổi phần nào được hiển thị.

Để hiển thị một phần 30x40 của một hình ảnh khởi điểm (10,20):

<style type="text/css"> 
    div.viewport { 
     overflow: hidden; 
     position: relative; 
    } 

    img.clipped { 
     display: block; 
     position: absolute; 
    } 
</style> 

<script type="text/javascript"> 
    function setViewport(img, x, y, width, height) { 
     img.style.left = "-" + x + "px"; 
     img.style.top = "-" + y + "px"; 

     if (width !== undefined) { 
      img.parentNode.style.width = width + "px"; 
      img.parentNode.style.height = height + "px"; 
     } 
    } 

    setViewport(document.getElementsByTagName("img")[0], 10, 20, 30, 40); 
</script> 

<div class="viewport"> 
    <img class="clipped" src="/images/clipped.png" alt="Clipped image"/> 
</div> 

Các thuộc tính CSS thường được kết hợp với các lớp học để bạn có thể có nhiều viewports/cắt bớt hình ảnh trên trang của bạn. Chức năng setViewport(…) có thể được gọi bất cứ lúc nào để thay đổi phần nào của hình ảnh được hiển thị.

Answer 2

Thuộc tính chiều rộng/chiều cao của đối tượng hình ảnh của tài liệu chỉ đọc. Nếu bạn có thể thay đổi chúng, tuy nhiên, bạn sẽ chỉ squish khung, không cắt khung lên như bạn mong muốn. Loại thao tác hình ảnh bạn muốn không thể được thực hiện với javascript phía máy khách. Tôi đề nghị cắt hình ảnh lên trên máy chủ, hoặc che phủ một div trên hình ảnh để ẩn các phần bạn không muốn hiển thị.

Answer 3

Điều gì làm nảy mầm về cơ bản vị trí một DIV được định vị hoàn toàn bên trong một DIV khác có tràn: bị ẩn. Bạn có thể làm tương tự, tất cả những gì bạn cần làm là thay đổi kích thước DIV bên ngoài tùy thuộc vào kích thước của mỗi khung hình lớn hơn. Bạn có thể làm điều đó trong mã một cách dễ dàng.

Bạn chỉ có thể thiết lập phong cách bên trong Bảo hiểm tiền gửi:

left: (your x-position = 0 or a negative integer * frame width)px 

Hầu hết Khung JavaScript làm cho điều này khá dễ dàng.

Answer 4

CSS cũng xác định một kiểu để cắt. Xem thuộc tính clip trong thông số CSS.

Answer 5

Than ôi, JavaScript chỉ đơn giản là không có khả năng trích xuất các thuộc tính của hình ảnh mà bạn yêu cầu để làm một cái gì đó như thế này. Tuy nhiên, có thể có sự cứu rỗi dưới dạng phần tử HTML < canvas> được kết hợp với một chút kịch bản phía máy chủ.

PHP code để đi về giải nén chiều rộng và chiều cao của hình ảnh thực sự lớn:

<?php 
$large_image = 'path/to/large_image'; 
$full_w = imagesx($large_image); 
$full_h = imagesy($large_image); 
?> 

Từ đây, sau đó bạn muốn tải các hình ảnh vào một < canvas> yếu tố, ví dụ trong số đó được ghi chép lại here. Bây giờ, lý thuyết của tôi là bạn có thể trích xuất dữ liệu pixel từ phần tử canvas <; giả sử rằng bạn có thể, bạn chỉ cần chắc chắn rằng có một số hình thức phân chia nhất định giữa các khung của hình ảnh lớn và sau đó tìm kiếm nó trong khung hình.Giả sử bạn đã tìm thấy dải phân cách 110 pixel ở bên trái của hình ảnh; sau đó bạn sẽ biết rằng mỗi "khung hình" rộng 110 pixel và bạn đã có toàn bộ chiều rộng được lưu trữ trong một biến PHP, do đó, giải mã được bạn đang làm việc với bao nhiêu hình ảnh.

Phương diện đầu cơ duy nhất cho phương pháp này là liệu JavaScript có khả năng trích xuất dữ liệu màu từ một vị trí được chỉ định trong một hình ảnh được tải vào phần tử canvas < hay không; nếu điều này là có thể, thì những gì bạn đang cố gắng hoàn thành là hoàn toàn khả thi.

Answer 6

Tôi cho rằng bạn muốn chụp hình thu nhỏ cho hình ảnh của mình. Bạn có thể sử dụng ImageThumbnail.js đã tạo ra nguyên mẫu từ thư viện theo cách này:

<script type="text/javascript" src="prototype.js"></script> 
<script type="text/javascript" src="ImageThumbnail.js"></script> 
<input type="file" id="photo"> 
<img src="empty.gif" id="thumbnail" width="80" height="0"> 
<script type="text/javascript"> 
<!-- 
    new Image.Thumbnail('thumbnail', 'photo'); 
//--> 
</script> 

để biết thêm information

Answer 7

Trong câu trả lời cho:

Alas, JavaScript đơn giản là không có khả năng giải nén các thuộc tính của hình ảnh bạn muốn làm một cái gì đó như thế này. Tuy nhiên, có thể có sự cứu rỗi dưới dạng phần tử HTML được kết hợp với một chút kịch bản phía máy chủ. ...

< ? (open php) 
$large_image = 'path/to/large_image'; 
$full_w = imagesx($large_image); 
$full_h = imagesy($large_image); 
(close php) ? > 

Điều này có thể được thực hiện trong Javascript, chỉ cần google một chút:

var newimage = new Image(); 
newimage.src = document.getElementById('background').src; 
var height = newimage.height; 
var width = newimage.width; 

này tạo ra một hình ảnh mới từ một trong hiện tại và chụp theo cách này trong kịch bản java bản gốc các thuộc tính chiều cao và chiều rộng của hình ảnh gốc (không phải là một id'ed làm nền.

Trả lời:

Các thuộc tính chiều rộng/chiều cao của đối tượng hình ảnh của tài liệu chỉ đọc. Nếu bạn có thể thay đổi chúng, tuy nhiên, bạn sẽ chỉ squish khung, không cắt khung lên như bạn mong muốn. Loại thao tác hình ảnh bạn muốn không thể được thực hiện với javascript phía máy khách. Tôi đề nghị cắt hình ảnh lên trên máy chủ, hoặc che phủ một div trên hình ảnh để ẩn các phần bạn không muốn hiển thị.

...

var newimage = new Image(); 
newimage.src = document.getElementById('background').src; 
var height = newimage.height; 
var width = newimage.width; 
newimage.style.height = '200px'; 
newimage.style.width = '200px'; 
newimage.height = '200px'; 
newimage.width = '200px'; 

và nếu muốn:

newimage.setAttribute('height','200px'); 

Các đôi newimage.style.height và newimage.height là cần thiết trong một số trường hợp để đảm bảo rằng một trình duyệt IE sẽ hiểu trong thời gian mà hình ảnh được thay đổi kích thước (bạn sẽ làm cho điều đó ngay sau đó, và quá trình xử lý IE nội bộ quá chậm cho điều đó.)

Cảm ơn kịch bản trên Tôi thay đổi và thực hiện trên http://morethanvoice.net/m1/reader13.php (menu chuột phải ... mouseover zoom lent) chính xác ngay cả trong IE, nhưng như bạn sẽ thấy quá trình xử lý ảnh mousemove quá nhanh đối với IE kiểu cũ, làm cho vị trí này chỉ một lần. Trong mọi trường hợp, bất kỳ ý tưởng tốt đều được chào đón.

Nhờ tất cả sự quan tâm của bạn, hy vọng rằng các mã ở trên có thể giúp ai đó ...

Claudio Klemp http://morethanvoice.net/m1/reader13.php

Answer 8

thử sử dụng thư viện haxcv haxcv js bởi các chức năng đơn giản

đi đến https://docs.haxcv.org/Methods/cutImage để đọc thêm về thư viện của ông

var Pixels = _("img").cutImage (x , y , width , height ); 

_ ("img"). Src (Pixels.src);

// trở lại cắt hình ảnh nhưng cố gắng bao gồm thư viện đầu tiên