Phương pháp chuyển đổi canvas HTML5 thành SVG?

Question

Cần chuyển đổi canvas HTML5 thành SVG để chỉnh sửa? Pointer sẽ được đánh giá

Answer 1

canvas-svg cho phép bạn lưu 2d http://code.google.com/p/canvas-svg/ bạn có thể làm điều ngược lại với canvg http://code.google.com/p/canvg/

Answer 2

Xem thêm http://code.google.com/p/html5-canvas-svg/

Fabric.js quảng cáo có một "canvas-to-svg" phân tích cú pháp, và nó có một bản demo rõ ràng là converts canvas to SVG. Mặc dù các mục khác hoạt động nếu bạn sử dụng các điều khiển và sau đó "Rasterize canvas to" SVG, nó có vấn đề khi chuyển đổi hình ảnh mặc định, vì vậy bạn phải kiểm tra xem điều này có thực sự có khả năng chuyển đổi canvas thô thành SVG hay không nếu tạo các mục thông qua trình chỉnh sửa.

Answer 3

Hãy thử canvas2svg.js. [Demo]

Tôi tự mình điều hành và kết thúc bằng việc viết thư viện cho việc này. Vào thời điểm đó, các thư viện khác hơi thưa thớt hoặc không tạo SVG hợp lệ.

Khái niệm cơ bản là giống nhau. Bạn tạo ra một bối cảnh 2D giả lập và sau đó tạo ra một đồ thị cảnh SVG khi bạn gọi các lệnh vẽ canvas. Về cơ bản bạn có thể tái sử dụng cùng chức năng vẽ. Tùy thuộc vào ngữ cảnh nào bạn chuyển đến nó, bạn vẽ một canvas 2D chuẩn hoặc tạo một tài liệu SVG mà bạn có thể tuần tự hóa.

Bạn thực sự không thể "chuyển đổi" phần tử canvas được vẽ thành, vì nó chỉ là một ảnh bitmap, vì vậy hãy ghi nhớ điều đó. Khi bạn xuất sang SVG, bạn thực sự chỉ cần gọi lại cùng một chức năng vẽ bằng ngữ cảnh giả.

Vì vậy, như một ví dụ nhanh:

//create a canvas2svg mock context 
var myMockContext = new C2S(500,500); //pass in your desired SVG document width/height 

var draw = function(ctx) { 
    //do your normal drawing 
    ctx.fillRect(0,0,200,200); 
    //etc... 
} 

draw(myMockContext); 
myMockContext.getSerializedSvg(); //returns the serialized SVG document 
myMockContext.getSvg(); //inline svg 

Answer 4

Tôi nghĩ rằng bức tranh đã phải vẽ một svg cho phương pháp này, nhưng tôi tìm thấy nó trong quá trình cố gắng để tạo ra một nút tải svg bản thân mình, cũng chạy vào câu hỏi tràn ngăn xếp này trong cùng một tìm kiếm cho rằng nó có thể có liên quan.

từ https://bramp.github.io/js-sequence-diagrams/

xung quanh dòng 200ish, nhưng ai mà biết được anh ta có thể chỉnh sửa trang web trong tương lai biên tập

chỉ là một phần tử div, và với mục đích của tiếng ồn này, anh ấy chỉ đóng gói những thứ các svg được tạo ra từ svg đã tải xuống.

diagram_div là canvas svg thực tế đang ngồi trong.

function(ev) { 
    var svg = diagram_div.find('svg')[0]; 
    var width = parseInt(svg.width.baseVal.value); 
    var height = parseInt(svg.height.baseVal.value); 
    var data = editor.getValue(); 
    var xml = '<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '" xmlns:xlink="http://www.w3.org/1999/xlink"><source><![CDATA[' + data + ']]></source>' + svg.innerHTML + '</svg>'; 

    var a = $(this); 
    a.attr("download", "diagram.svg"); // TODO I could put title here 
    a.attr("href", "data:image/svg+xml," + encodeURIComponent(xml)); 
}