Преобразование canvas в изображение и открытие в новом окне с использованием ruby on rails и javascript

Я довольно застрял в этой проблеме и надеюсь, что вы, ребята, можете мне помочь.

То, что я пытаюсь достичь, - это щелкнуть ссылку, кнопку или изображение, которое когда-либо кажется более простым, я конвертирую изображение в изображение с помощью toDataURL. После этого открывается новое окно, содержащее это изображение.

Как передать URL-адрес данных, сгенерированный из toDataURL, в новое окно с использованием ruby on rails?

Спасибо заранее.

Ответ 1

Во-первых, это не имеет особого отношения к Rails. Вы можете использовать Ruby для решения этой проблемы.

Сначала выберите содержимое холста, как вы уже делаете:

var dataURL = canvas.toDataURL("image/png");

В этот момент вы можете просто открыть новое окно с помощью Javascript и открыть изображение прямо там (взаимодействие с сервером не требуется):

var window = window.open();
window.document.write('<img src="'+dataURL+'"/>');

$('a.my-link').click(function(){
  open().document.write('<img src="'+dataURL+'"/>');
  return false;
});

Вот небольшая скрипка, чтобы проиллюстрировать это: http://jsfiddle.net/XtUFt/

Или вы можете отправить чистую строку base64 на сервер и создать свое приложение для создания фактического изображения и использовать представление для его рендеринга:

var base64 = dataURL.replace(/^data:image\/(png|jpg);base64,/, "") ;
var window = window.open('http://www.yourapp.com/controller/action?base64='+base64);

! Это упрощенный пример и предполагает маленькое изображение очень. Если ваше изображение как-то больше, вам придется использовать запрос "post", потому что ваш URL-адрес не будет переносить данные, поскольку строка просто слишком длинная!

И на сервере вы можете использовать для создания изображения:

require 'base64'
File.open('your/image/path/and/name.gif', 'wb') do|f|
  f.write(Base64.decode64(params[:base64]))
end

Тогда это просто вопрос об открытии изображения и визуализации представления соответственно.

Ответ 2

Я опаздываю на это, но вот один быстрый грязный лайнер, который решает этот вопрос:

 window.open(document.getElementById("mycanvas").toDataURL());

Надеюсь, это поможет кому-то в ближайшем будущем.

Ответ 3

Мой подход:

var dataURL = canvas.toDataURL("image/png");
var newTab = window.open(dataURL, 'Image');
newTab.focus();

Это может помочь кому-то в будущем.