Fatal编程技术网
  • javascript/
  • Javascript 在画布中传递背景图像-签名-ColdFusion

Javascript 在画布中传递背景图像-签名-ColdFusion

javascript coldfusion html5-canvas

Javascript 在画布中传递背景图像-签名-ColdFusion,javascript,coldfusion,html5-canvas,drawing,drawable,Javascript,Coldfusion,Html5 Canvas,Drawing,Drawable,我一直在玩zksignature，它可以很好地将签名传递给其他人。我想知道如何将背景图像也传递给它。这个想法可能是在背景上绘制，然后保存背景和图形 我可以使用css将背景加载到画布中，但它不会作为绘制图像的一部分传递 有人有什么想法吗？还是有一个简单的javascript绘图函数 档案： bg.cfm-加载带有背景的画布 blank_signature.js-是javascript bg2.cfm-返回页面（当前仅显示图形-不显示背景） BG.cfm <!DOCTYPE html>

我一直在玩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>&nbsp; &nbsp; Sign &nbsp; &nbsp;</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>


.verd15{font-family:Verdana；字体大小：15pt；字体大小：normal；颜色：##000000；}
.verd14{字体系列：Verdana；字体大小：14pt；字体重量：普通；颜色：##000000；}
.verd13{font-family:Verdana；字体大小：13pt；字体大小：normal；颜色：##000000；}
.verd10{字体系列：Verdana；字体大小：10pt；字体重量：正常；颜色：##000000；}
.verd9{font-family:Verdana；字体大小：9pt；字体大小：normal；颜色：##000000；}
.verd8{字体系列：Verdana；字体大小：8pt；字体重量：正常；颜色：##000000；}
主体、画布、div、表单、输入{
保证金：0；
填充：0；
}
#包装纸{
填充：10px；
}
帆布{
位置：相对位置；
保证金：1px；
左边距：0px；
边框：1px实心#3a87ad；
背景图片：url（hb.jpg）；
}
h1，p{
左侧填充：2px；
宽度：100%；
保证金：0自动；
}
#控制面板{
保证金：2倍；
}
#保存签名{
显示：无；
}


抽签：



不支持画布。
zkSignature.capture（）；
签名
清楚的
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;

var zkSignature=（函数（）{
var空=真；
返回{
//公共职能
捕获：函数（）{
var parent=document.getElementById（“画布”）；
parent.childNodes[0].nodeValue=“”；
var canvasArea=document.createElement（“canvas”）；
canvasArea.setAttribute（“id”、“newdraw”）；
父母、子女（拉票区）；
var canvas=document.getElementById（“newdraw”）；
var context=canvas.getContext（“2d”）；
如果（！上下文）{
抛出新错误（“未能获取画布的2d上下文”）；
}
屏幕宽度=屏幕宽度；
如果（屏幕宽度<480）{
宽度=402；
canvas.height=409；
}否则{
宽度=402；
canvas.height=409；
}
var disableSave=true；
var像素=[]；
var-cpixels=[]；
var xyLast={}；
var xyAddLast={}；
var计算=假；
//功能
{
函数remove_event_listeners（）{
canvas.removeEventListener（'mousemove'，on_mousemove，false）；
canvas.removeEventListener（'mouseup'，on_mouseup，false）；
canvas.removeEventListener（'touchmove'，在鼠标移动上，false）；
canvas.removeEventListener（'touchend'，在鼠标上，false）；
document.body.removeEventListener（'mouseup'，on_mouseup，false）；
document.body.removeEventListener（'touchend'，在鼠标上，假）；
}
功能获取板协调（e）{
变量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.rx；
y=e.分层；
}else if（e.offsetX | | 0==e.offsetX）{
x=e.offsetX；
y=e.offsetY；
}
返回{
x:x，
y:y
};
};
鼠标向下（e）时的函数{
e、 预防默认值（）；
e、 停止传播（）；
canvas.addEventListener（'mousemove'，on_mousemove，false）；
canvas.addEventListener（'mouseup'，on_mouseup，false）；
canvas.addEventListener（'touchmove'，在鼠标移动上，false）；
canvas.addEventListener（'touchend'，在鼠标上，false）；
document.body.addEventListener（'mouseup'，on_mouseup，false）；
document.body.addEventListener（'touchend'，在鼠标上，假）；
空=假；
var xy=获取板坐标（e）；
context.beginPath（）；
push（'moveStart'）；
context.moveTo（xy.x，xy.y）；
像素推送（xy.x，xy.y）；
xyLast=xy；
};
_mousemove上的函数（e，finish）{
e、 预防默认值（）；
e、 停止传播（）；
var xy=获取板坐标（e）；
变量xyAdd={
x:（xyLast.x+xy.x）/2，
y：（xyLast.y+xy.y）/2
};
如果（计算）{
var xLast=（xyAddLast.x+xyLast.x+xyAdd.x）/3；

<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>