我一直在玩zksignature，它可以很好地传递签名等等。想知道如何通过它传递背景图像。想法可能是在背景上绘制，然后保存背景和绘图。
我可以使用css将背景加载到画布中 - 但它不会作为绘制图像的一部分传递。
有人有什么想法吗？或者是一个简单的JavaScript绘图功能吗？
文件： bg.cfm - 用背景加载画布 blank_signature.js - 是javascript bg2.cfm - 返回页面（目前仅显示绘图 - 也不显示背景）
BG.cfm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<script src="blank_signature.js"></script>
</head>
<style>
.verd15 { font-family: Verdana; font-size: 15pt; font-weight: normal; color: ##000000;}
.verd14 { font-family: Verdana; font-size: 14pt; font-weight: normal; color: ##000000;}
.verd13 { font-family: Verdana; font-size: 13pt; font-weight: normal; color: ##000000;}
.verd10 { font-family: Verdana; font-size: 10pt; font-weight: normal; color: ##000000;}
.verd9 { font-family: Verdana; font-size: 9pt; font-weight: normal; color: ##000000;}
.verd8 { font-family: Verdana; font-size: 8pt; font-weight: normal; color: ##000000;}
body, canvas, div, form, input {
margin: 0;
padding: 0;
}
#wrapper {
padding: 10px;
}
canvas {
position: relative;
margin: 1px;
margin-left: 0px;
border: 1px solid #3a87ad;
background-image: url(hb.jpg);
}
h1, p {
padding-left: 2px;
width: 100%;
margin: 0 auto;
}
#controlPanel {
margin: 2px;
}
#saveSignature {
display: none;
}
</style>
<body>
<cfset chars = "abcdefghiklmnopqrstuvwxyz1234567890">
<cfset strLength = 6 >
<cfset urandout = "">
<cfloop from="1" to="#strLength#" index="i">
<cfset rnum = ceiling(rand() * len(chars))>
<cfif rnum EQ 0 ><cfset rnum = 1></cfif>
<cfset urandout = urandout & mid(chars, rnum, 1)>
</cfloop>
<cfset chars = "abcdefghiklmnopqrstuvwxyz1234567890">
<cfset strLength = 6 >
<cfset srandout = "">
<cfloop from="1" to="#strLength#" index="i">
<cfset rnum = ceiling(rand() * len(chars))>
<cfif rnum EQ 0 ><cfset rnum = 1></cfif>
<cfset srandout = srandout & mid(chars, rnum, 1)>
</cfloop>
<br>
<div id="wrapper">
<form>
<span class=verd13>
<b>Draw:</b>
</span>
<br><br>
<div id="canvas">
Canvas is not supported.
</div>
<script>
zkSignature.capture();
</script>
<!--- <img id="newSignature" alt="Saved image png" src="hb.jpg">
<img id="bg" src="hb.jpg"> --->
<table border=0 cellpadding=3 width=300>
<tr>
<td>
<button type="button" onclick="zkSignature.send()" class=verd13> Sign </button>
</td>
<td align=right valign=top>
<button type="button" onclick="zkSignature.clear()" class=verd10> Clear </button>
</td>
</tr></table>
<cfoutput>
<input type="hidden" id="uid" value="#urandout#">
<input type="hidden" id="signid" value="#srandout#">
</cfoutput>
</form>
</div>
<table align=center class=verd10>
<tr><td>
</td></tr></table>
</body>
</html>
blank_signature.js
var zkSignature = (function () {
var empty = true;
return {
//public functions
capture: function (){
var parent = document.getElementById("canvas");
parent.childNodes[0].nodeValue = "";
var canvasArea = document.createElement("canvas");
canvasArea.setAttribute("id", "newdraw");
parent.appendChild(canvasArea);
var canvas = document.getElementById("newdraw");
var context = canvas.getContext("2d");
if (!context) {
throw new Error("Failed to get canvas' 2d context");
}
screenwidth = screen.width;
if (screenwidth < 480) {
canvas.width = 402;
canvas.height = 409;
} else {
canvas.width = 402;
canvas.height = 409;
}
var disableSave = true;
var pixels = [];
var cpixels = [];
var xyLast = {};
var xyAddLast = {};
var calculate = false;
//functions
{
function remove_event_listeners() {
canvas.removeEventListener('mousemove', on_mousemove, false);
canvas.removeEventListener('mouseup', on_mouseup, false);
canvas.removeEventListener('touchmove', on_mousemove, false);
canvas.removeEventListener('touchend', on_mouseup, false);
document.body.removeEventListener('mouseup', on_mouseup, false);
document.body.removeEventListener('touchend', on_mouseup, false);
}
function get_board_coords(e) {
var x, y;
if (e.changedTouches && e.changedTouches[0]) {
var offsety = canvas.offsetTop || 0;
var offsetx = canvas.offsetLeft || 0;
x = e.changedTouches[0].pageX - offsetx;
y = e.changedTouches[0].pageY - offsety;
} else if (e.layerX || 0 == e.layerX) {
x = e.layerX;
y = e.layerY;
} else if (e.offsetX || 0 == e.offsetX) {
x = e.offsetX;
y = e.offsetY;
}
return {
x : x,
y : y
};
};
function on_mousedown(e) {
e.preventDefault();
e.stopPropagation();
canvas.addEventListener('mousemove', on_mousemove, false);
canvas.addEventListener('mouseup', on_mouseup, false);
canvas.addEventListener('touchmove', on_mousemove, false);
canvas.addEventListener('touchend', on_mouseup, false);
document.body.addEventListener('mouseup', on_mouseup, false);
document.body.addEventListener('touchend', on_mouseup, false);
empty = false;
var xy = get_board_coords(e);
context.beginPath();
pixels.push('moveStart');
context.moveTo(xy.x, xy.y);
pixels.push(xy.x, xy.y);
xyLast = xy;
};
function on_mousemove(e, finish) {
e.preventDefault();
e.stopPropagation();
var xy = get_board_coords(e);
var xyAdd = {
x : (xyLast.x + xy.x) / 2,
y : (xyLast.y + xy.y) / 2
};
if (calculate) {
var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
pixels.push(xLast, yLast);
} else {
calculate = true;
}
context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
pixels.push(xyAdd.x, xyAdd.y);
context.stroke();
context.beginPath();
context.moveTo(xyAdd.x, xyAdd.y);
xyAddLast = xyAdd;
xyLast = xy;
};
function on_mouseup(e) {
remove_event_listeners();
disableSave = false;
context.stroke();
pixels.push('e');
calculate = false;
};
}
canvas.addEventListener('mousedown', on_mousedown, false);
canvas.addEventListener('touchstart', on_mousedown, false);
}
,
save : function(){
var canvas = document.getElementById("newdraw");
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL("image/png");
}
,
clear : function(){
var parent = document.getElementById("canvas");
var child = document.getElementById("newdraw");
parent.removeChild(child);
empty = true;
this.capture();
}
,
send : function(){
if (empty == false){
var canvas = document.getElementById("newdraw");
var dataURL = canvas.toDataURL("image/png");
var signid = document.getElementById('signid').value;
var uid = document.getElementById('uid').value;
var dataform = document.createElement("form");
document.body.appendChild(dataform);
dataform.setAttribute("action","bg2.cfm");
dataform.setAttribute("enctype","multipart/form-data");
dataform.setAttribute("method","POST");
dataform.setAttribute("target","_self");
dataform.innerHTML =
'<input type="hidden" name="image" value="' + dataURL + '"/>' +
'<input type="hidden" name="uid" value="' + uid + '"/>' +
'<input type="hidden" name="signid" value="' + signid + '"/>';
dataform.submit();
}
}
}
})()
var zkSignature;
bg2.cfm
<style>
.verd15 { font-family: Verdana; font-size: 15pt; font-weight: normal; color: ##000000;}
.verd14 { font-family: Verdana; font-size: 14pt; font-weight: normal; color: ##000000;}
.verd13 { font-family: Verdana; font-size: 13pt; font-weight: normal; color: ##000000;}
.verd10 { font-family: Verdana; font-size: 10pt; font-weight: normal; color: ##000000;}
.verd9 { font-family: Verdana; font-size: 9pt; font-weight: normal; color: ##000000;}
.verd8 { font-family: Verdana; font-size: 8pt; font-weight: normal; color: ##000000;}
body, canvas, div, form, input {
margin: 0;
padding: 0;
}
#wrapper {
padding: 10px;
}
canvas {
position: relative;
margin: 1px;
margin-left: 0px;
border: 1px solid #3a87ad;
background-image: url(hb.jpg);
}
h1, p {
padding-left: 2px;
width: 100%;
margin: 0 auto;
}
#controlPanel {
margin: 2px;
}
#saveSignature {
display: none;
}
</style>
<cfoutput>
<br>
ID: #signid#
<br><br>
User: #uid#
<br>
<br>
<cfset chars = "abcdefghiklmnopqrstuvwxyz1234567890">
<cfset strLength = 6 >
<cfset randout = "">
<cfloop from="1" to="#strLength#" index="i">
<cfset rnum = ceiling(rand() * len(chars))>
<cfif rnum EQ 0 ><cfset rnum = 1></cfif>
<cfset randout = randout & mid(chars, rnum, 1)>
</cfloop>
<cfset nimage = imageReadBase64(image)>
<cfimage
source="#nimage#"
destination="#randout#.png"
action="write"
nameconflict="overwrite">
<img src="#randout#.png" border=1>
</cfoutput>
<br>
<br>
<li><a href="bg.cfm">Back</a>
<br>