2012-03-29 44 views
6

Tôi có một trang web sử dụng thiết lập SVG/VML (qua Raphael JS) trong một ứng dụng bản đồ nơi SVG được sử dụng để hiển thị đồ họa trên đỉnh một hình ảnh bản đồ phông nền. Điều này hoạt động rất tốt trên màn hình và để in bản đồ bản cứng có lớp phủ. Tuy nhiên, khi thiết lập này tách rời thì người dùng muốn lưu hình ảnh bản đồ bằng lớp phủ SVG vào tệp .JPG cục bộ.Hợp nhất SVG và .JPG thành một hình ảnh?

Cụ thể hơn, việc sử dụng chức năng nhấp chuột phải của hầu hết các trình duyệt để "Lưu hình ảnh dưới dạng ..." không hoạt động khi có phần tử SVG/VML nằm trên ảnh. Nhấp chuột phải vào bản đồ và người dùng có thể lưu hình ảnh bản đồ nhưng không có lớp phủ. Nhấp chuột phải vào phần tử SVG phủ lên và người dùng tốt nhất nhận được khả năng kiểm tra phần tử hoặc lưu một số HTML (nó khác nhau tùy theo trình duyệt).

Vì vậy, câu hỏi chính của tôi ở đây là; Có thể chụp ảnh và phần tử SVG và kết hợp chúng hay không (tốt nhất là phía máy khách, mặc dù tôi đang mở để lựa chọn) thành một hình ảnh "phẳng", .JPG, .PNG hoặc ngược lại, sau đó có thể được nhấp chuột phải và được lưu hoặc tải xuống PC của người dùng theo yêu cầu?

+0

Tùy chọn có bao gồm ImageMagick không? http://www.imagemagick.org/script/magick-vector-graphics.php – PinnyM

+0

Các bản sao có thể có: http://stackoverflow.com/questions/4086703/convert-raphael-svg-to-image-png-etc-client -side http://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser/3976034#3976034 – JayC

+0

Tôi đang xem xét phần mở rộng Imagick cho PHP để có thể hoàn thành những gì tôi đang cố gắng làm. Đối với các chủ đề trùng lặp có thể xảy ra, tôi đã xem xét cả hai chủ đề đó và sự phụ thuộc vào Canvas và sự thiếu hụt của IE khiến cho nó phù hợp với những gì được cho là một ứng dụng độc lập với trình duyệt.Điều đó và cả hai chủ đề chỉ chuyển đổi bản thân SVG thành một hình ảnh, không phải là sự hợp nhất sau đó của đồ họa SVG đã nói và một hình ảnh khác thành một hình ảnh duy nhất. – theDom

Trả lời

0

Những gì bạn cần làm là, thay vì đè JPG và SVG:

  • Lấy ảnh gốc
  • Vẽ các dòng trong tập tin SVG trên nó trong bộ nhớ
  • Output rằng hình ảnh duy nhất như một JPG cho trình duyệt.

Điều này tất nhiên có nghĩa là bạn phải có khả năng để giải thích SVG ...

+0

Ok ... điều này có thể sử dụng JavaScript tiêu chuẩn phía máy khách hay một thứ khác trên máy chủ không? Tôi không chắc chắn chính xác những gì bạn có ý nghĩa bằng cách vẽ các dòng trên hình ảnh "trong bộ nhớ" – theDom

+0

Bản vẽ sau đó không được thực hiện trong trình duyệt (như với JavaScript), nhưng trên máy chủ trong quá trình xử lý yêu cầu. –

0

Một khả năng sẽ được nhúng hình ảnh vào SVG, và sau đó tạo ra một URL dữ liệu với những hình ảnh kết hợp. Ví dụ sau đạt được điều này ở định dạng png:

var datauri = c.toDataURL('image/png'); 

trong đó c là lớp SVG được định dạng của bạn. Để biết thêm thông tin, hãy xem trình soạn thảo mã nguồn mở này, http://code.google.com/p/svg-edit/, trong tệp svgcanvas.js và svg-editor.js là một ví dụ tốt về cách xuất SVG dưới dạng tệp png. Hơi khó hiểu lúc đầu, nhưng được viết rất tốt.

0

Tôi e rằng bạn sẽ gặp khó khăn khi cố gắng hiển thị SVG trên phần tử Canvas giống như vậy do các ràng buộc về bảo mật (ví dụ: tôi không thể làm việc này trong Firefox).

Dưới đây là một ý tưởng mặc dù:

  1. Nơi hình ảnh của bạn bên trong SVG DOM bằng cách sử dụng svg <image> thẻ
  2. Pass Code SVG của bạn thông qua canvg thư viện
  3. Sử dụng toDataURL phương pháp canvg để tạo hình ảnh
Các vấn đề liên quan