Конвертировать холст в изображение и открыть в новом окне, используя ruby ​​on rails и javascript

Question

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

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

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

Заранее спасибо.

Answer 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

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

Answer 2

Мой подход:

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

Может быть, кому-то поможет в будущем.

Answer 3

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

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

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