Question

我需要jSignature的帮助。我能够创建一个图像，然后将该图像写回页面。我无法工作的原因（以及我首先探索这个插件的原因）是将图像导出页面。我想拍摄图像数据并通过电子邮件发送出去，以便图像显示在电子邮件正文中。如果已经尝试了很多方法并且没有任何效果。目前我的js看起来像这样：

var $sigDiv = $("#signature").jSignature();
      $('<input type="button" value="Reset">').bind('click', function(e){
        $sigDiv.jSignature('reset');
      }).appendTo($sigDiv);

在提交表格后，它看起来像这样：

var datapair = $sigDiv.jSignature("getData", "svg");
      var i = new Image();
      i.src = "data:" + datapair[0] + "," + datapair[1];
      $(i).appendTo($("#success"));

我尝试在变量中获取图像数据，并通过AJAX将数据字符串发送到PHP邮件处理表单，执行以下操作：

<img src="<?php echo $_POST['signature']; ?>"/>

或者这个：

<object src="<?php echo $_POST['signature']; ?>"></object>

我已经筋疲力尽了，试图让它在电子邮件中显示图像。非常感谢任何帮助。

Answer 1

YEHESSS！得到它的工作。如果我作为图像导出并在图像上执行encodeURIComponent（image），则AJAX调用不会搞砸图像数据。现在像野兽一样工作。嘿，谢谢你的帮助，阿比德。

Answer 2

我不确定，但你看到下面的网址我认为这对你有帮助

https://github.com/brinley/jSignature/

demo url; -

http://willowsystems.github.com/jSignature/#/demo/

jSignature是一个jQuery插件，它简化了浏览器窗口中签名捕获字段的创建，允许用户使用鼠标，钢笔或手指绘制签名。

jSignature将签名捕获为笔划的矢量轮廓。虽然jSignature也可以导出出色的位图（PNG），但提取签名的高度可伸缩笔画移动坐标（也称为矢量图像）可以提高签名渲染的灵活性。

额外的努力（通过平滑和压力模拟）使得笔画在屏幕上看起来很漂亮，而这些笔画是由签名者绘制的。

支持所有主要的台式机，平板电脑和手机浏览器。默认情况下使用HTML5 Canvas元素。当浏览器不支持实际的Canvas时（Iinternet Explorer v.8及更低版本），我们会依赖基于Flash的Canvas元素模拟器（FlashCanvas）。

实时jSignature仅渲染与设备相关的“最漂亮”的近似值。数据捕获始终相同 - 我们捕获尽可能多的移动坐标。笔画的渲染因浏览器的功能，设备的效率，屏幕尺寸而异。

捕获签名的屏幕表示的这种降级和增强是为了确保渲染不会阻碍捕获的响应性而完成的。例如，在慢速渲染设备（Android浏览器，基于FlashCanvas的Canvas仿真）上，平滑被提升一个档位以补偿捕获的笔划坐标中的大间隙 - 这是捕获设备效率低下的结果。在所有情况下，客户都会对图纸的响应性和美感感到高兴。

jSignature可以轻松地将自己整理到现有的样式网站中。 jSignature自动检测包装元素上使用的颜色（文本颜色=笔颜色，背景=背景），并自动为“装饰”（签名行）选择令人愉悦的中间阴影。 jSignature可以很好地适应固定和可变宽度的网页设计，以及各种尺寸的屏幕（手机，平板电脑，计算机屏幕），并在父元素改变大小时自动重新缩放绘图区域和签名

jSignature图像导出到PHP电子邮件

2 个答案: