Как сохранить холст SVG в локальной файловой системе - PullRequest
75 голосов
/ 20 марта 2010

Есть ли способ разрешить пользователю загружать этот файл в свою локальную файловую систему после того, как он создал векторный граф на холсте svg javascript, используя браузер?

SVG - это совершенно новое поле для меня, поэтому, пожалуйста, будьте терпеливы, если моя формулировка не точна.

Ответы [ 16 ]

1 голос
/ 17 декабря 2013

Возможно, я нашел лучший способ не заставлять пользователя нажимать правую кнопку мыши «сохранить изображение как». просто вживую нарисуйте код canvas base64 в href ссылки и измените его так, чтобы загрузка началась автоматически. я не знаю, совместим ли его универсальный браузер, но он должен работать с основными / новыми браузерами.

var canvas = document.getElementById('your-canvas');
    if (canvas.getContext) {
        var C = canvas.getContext('2d');
    }

$('#your-canvas').mousedown(function(event) {
    // feel free to choose your event ;) 

    // just for example
    // var OFFSET = $(this).offset();
    // var x = event.pageX - OFFSET.left;
    // var y = event.pageY - OFFSET.top;

    // standard data to url
    var imgdata = canvas.toDataURL('image/png');
    // modify the dataUrl so the browser starts downloading it instead of just showing it
    var newdata = imgdata.replace(/^data:image\/png/,'data:application/octet-stream');
    // give the link the values it needs
       $('a.linkwithnewattr').attr('download','your_pic_name.png').attr('href',newdata);

});

Не стесняйтесь обернуть вокруг все, что вы хотите, надеюсь, это поможет немного

1 голос
/ 21 марта 2010

Чтобы ответить на мой собственный вопрос:

Другая возможность, хотя и не самая лучшая, - это отображение сериализованного содержимого на веб-странице и возможность выбора, копирования и вставки пользователем.Это после изучения решения Эли Грея.

1 голос
/ 20 марта 2010

Вы ничего не можете сохранить с помощью javascript в локальной файловой системе, вам нужно просто отправить содержимое canvas на сервер и заставить пользователя загрузить и сохранить его.

1 голос
/ 20 марта 2010

Наиболее совместимым способом было бы обратное путешествие к серверу. Вы также можете использовать data: URI в некоторых браузерах.

0 голосов
/ 19 декабря 2016

Я сделал чистый / пригодный для использования букмарклет из предложений.

Он поместит уникальную ссылку рядом с каждым встроенным <svg> на странице.

https://codepen.io/corysimmons/pen/vybzqV

Надеюсь, это кому-нибудь поможет.

0 голосов
/ 18 сентября 2012

Нет необходимости заниматься программированием.Есть онлайн-приложения, которые люди уже создали для этого, и которые включают в себя такие определяемые параметры, как размеры, разрешение, формат вывода и т. Д.

Это одно из лучших онлайн-приложений для преобразования изображений, которое я нашел для svg-> jpeg. http://image.online -convert.com / преобразовать к JPG

...