Lưu hình ảnh svg được hiển thị bằng javascript vào đĩa cục bộ dưới dạng tệp .png

Question

Tôi mới sử dụng SVG và không phải là người dùng JavaScript nâng cao. Tôi có một trang web với nội dung svg được hiển thị động bởi javascript. Trong Internet Explorer khi tôi nhấp chuột phải vào nội dung svg, tôi nhận được tùy chọn "Save Picture As" và tôi có thể lưu nội dung như png hoặc svg.

Làm cách nào để lập trình làm điều đó bằng cách có nút và cho phép người dùng lưu nội dung trong png vào máy của họ.

Answer 1

Từ nghiên cứu của tôi, không có cách nào để thực hiện việc này mà không gửi nội dung svg đến máy chủ của bạn và trả lại dữ liệu để lưu dưới dạng tệp tải xuống.

Tuy nhiên, ngay cả điều này cũng khó thực hiện với một yêu cầu kiểu AJAX duy nhất và giải pháp được phức tạp một cách đáng kinh ngạc. Những người khác đã liên kết với các bài đăng khác giải thích điều này, nhưng tôi đã trải qua cùng một câu trả lời và không ai trong số họ giải thích nó rất tốt.

Dưới đây là các bước mà làm việc cho tôi:

1. Sử dụng Javascript để serialize nội dung SVG.

   var svgString = new XMLSerializer().serializeToString(svgElement);

2. Tạo một ẩn iframe mà src là nộp url. Cung cấp cho nó id.
3. Tạo ẩn input. Đặt số value của số input này thành nội dung SVG được tuần tự hóa.
4. Tạo biểu mẫu có mục tiêu là id được cung cấp cho iframe và có action là url gửi. Đặt input vào trong số form.
5. Gửi form.

6. Trên máy chủ của bạn, hãy sử dụng bất kỳ công cụ nào có sẵn (tôi không sử dụng .NET, do đó bạn đang ở đây ...) để chuyển đổi tài liệu SVG thành PNG. Gửi nội dung PNG lại cho khách hàng, đảm bảo sử dụng các tiêu đề:

   Content-Type:image/png

   Content-Disposition:attachment; filename=mypng.png

Trình duyệt nên bắt đầu tải xuống tập tin trên nội dung trở lại, mặc dù điều này là browser- phụ thuộc và tôi không chắc chắn nhưng một số trình duyệt có thể chọn mở hình ảnh trong tab mới thay vì mở hộp thoại tải xuống tệp.

Đây là một hàm (không hoàn hảo) sẽ thực hiện công việc AJAX (sử dụng JQuery nhưng bạn nên lấy ý tưởng). data là SVG serialized:

function ajaxFileDownload(url, data) { 
    var iframeId = "uniqueIFrameId";  // Change this to fit your code 
    var iframe = $("#" + iframeId); 

    // Remove old iframe if there 
    if(iframe) { 
     iframe.remove(); 
    } 

    // Create new iframe 
    iframe = $('<iframe src=""' + url + '"" name="' + iframeId + '" id="' + iframeId + '"></iframe>') 
     .appendTo(document.body) 
     .hide(); 

    // Create input 
    var input = '<input type="hidden" name="data" value="' + encodeURIComponent(data) + '" />'; 

    // Create form to send request 
    $('<form action="' + url + '" method="' + 'POST' + '" target="' + iframeId + '">' + input + '</form>') 
     .appendTo(document.body) 
     .submit() 
     .remove(); 
} 

Lưu ý rằng đây URL-mã hóa nội dung SVG, vì vậy bạn sẽ phải giải mã nó trên máy chủ của bạn trước khi chuyển đổi để PNG.

Cũng lưu ý rằng nếu bạn đã xác định kiểu cho SVG của mình trong biểu định kiểu bên ngoài, chúng sẽ không được sắp xếp theo thứ tự. Tôi quyết định đặt tất cả các kiểu nội tuyến trên các phần tử là presentation attributes vì lý do này.

Tôi hy vọng điều này sẽ hữu ích.