代码之家 › 专栏 › 技术社区 › Anita Mathew

如何将从输入字段获得的画布名称与javascript中的画布合并?

canvas javascript

Anita Mathew · 技术社区 · 6 年前

最初,我是在下载画布时合并画布和要分配给它的名称var(从输入字段获取名称)。但我不想下载画布,相反,我想合并画布及其名称,并将其转换为图像数据(base 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);

1 回复 | 直到 6 年前

geekonaut 6 年前

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

在这种情况下,可以创建一个link元素,其中画布的数据url为“ref”属性,filename为“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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前