javascript - 将一个图像拖到另一个图像上并将其保存为一个图像(如光增强现实)

标签 javascript html image drag-and-drop

我想知道我怎样才能意识到这一点?我想在背景中有一个更大的图像,并且能够将一个较小的图像拖放到更大图像上我想要的位置,最后保存它,这样它就变成了一个。

这可以用 javascript 和 html5 实现吗?

感谢任何想法!

谢谢

最佳答案

是的,当你的图像就位时:

  • 创建一个背景图片大小的 Canvas 元素
  • 将你的背景图片画进去
  • 遍历您的图像并记录位置
  • 使用您记录的 Canvas 的 context.drawImage(image, posX, posY) 绘制每张图像
  • 使用 canvas.toDataUrl() 从 Canvas 中提取最终图像

数据url可以设置为背景图片上的src,也可以直接上传到服务器等。将其设置为图片允许您右键单击它并使用另存为。

如果您最初使用 Canvas 作为“背景”图像(覆盖窗口)- 您只需使用您想要的背景图像对其进行初始化,然后从上面的第三点继续。

关于javascript - 将一个图像拖到另一个图像上并将其保存为一个图像(如光增强现实),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16644035/

相关文章:

java - Android 位图缩小

javascript - AJAX 响应中缺少值

javascript - 如何在对象内部使用解构赋值

javascript - 选择颜色为 :lightGreen in CSS using jQuery 的元素

html - z 索引问题。无法让部分 float 在聊天小部件上方

HTML 水平溢出可见,垂直溢出滚动

image - 我可以在 Konva.Image() 对象上存储自定义数据值吗?

image - 如何在 svg 图像中使用数据 blob

javascript - 如何用 Jest 模拟 redux Action

html - 在电子邮件中垂直旋转文本