如何将从输入字段获取的画布名称与Javascript中的画布合并？

Posted 2021-03-28

最初我正在合并画布和下载画布时要分配给它的名称var（其中名称是从输入字段获取的）。但我不想下载画布，而是想合并画布及其名称并将其转换为图像数据（base 64），然后将其移动到服务器，我将其解码为图像。

如何合并2个变量，然后使用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);

答案

如果我正确理解您的问题，您想让用户选择在输入字段中指定文件名，然后下载具有给定文件名的画布内容？

在这种情况下，您可以创建一个链接元素，其中画布的数据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();
})

Here is a working sample