Как объединить название холста, получаемого из поля ввода, с холстом в Javascript?

Question

Изначально я объединял холст и имя переменной, которую я хочу присвоить ему (где имя получается из поля ввода) при загрузке холста. Но я не хочу загружать холст, вместо этого я хочу объединить холст и его имя и преобразовать его в данные изображения (база 64), а затем переместить на сервер, где я буду декодировать его в изображение.

Как объединить две переменные и затем преобразовать их в данные изображения с помощью DataURL?

Js код:

  var name = $("#ContentPlaceHolder1_HiddenField1").val();

  var mergeCanvas = $('<canvas>')
        .attr({
            width: $(img).width(),
            height: $(img).height()
        });

  var mergedContext = mergeCanvas[0].getContext('2d');
  mergedContext.clearRect(0, 0, $(img).width(), $(img).height());
  mergedContext.drawImage(img, 0, 0);
  mergedContext.drawImage(canvas, 0, 0);

  This.downloadCanvas(mergeCanvas[0], name);

Answer 1

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

В этом случае вы можете создать элемент ссылки с URL-адресом данных холста в качестве атрибута "href" и именем файла в качестве атрибута "download".

Допустим, ваш HTML выглядит примерно так:

<p>
  <label>
    File name: <input id="filename">
    <button id="save">Download</button>
  </label>
</p>
<canvas width="250" height="250"></canvas>

тогда вы можете сделать следующее в вашем JavaScript:

var canvas = document.querySelector('canvas')
document.querySelector('#save').addEventListener('click', function () {
  var filename = document.querySelector('#filename').value
  var downloadLink = document.createElement('a')
  downloadLink.setAttribute('href', canvas.toDataURL())
  downloadLink.setAttribute('download', filename)
  downloadLink.click();
})

Вот рабочий образец