Image html5 kineticjs提供免费转换，将图像保存到web服务
我需要使用kinetic，以便使用锚点变换一个图像。我发现这个例子： 然后我只需要保存一个图像——yoda图像（id:myImg）并发送到web服务。我的储蓄部分有问题 有人能帮忙吗？我不确定一切都是正确的，因为当btnsave-Object#类没有方法“replace”index.html:187时，我得到了这个错误 代码Image html5 kineticjs提供免费转换，将图像保存到web服务,image,html,save,transform,kineticjs,Image,Html,Save,Transform,Kineticjs,我需要使用kinetic，以便使用锚点变换一个图像。我发现这个例子： 然后我只需要保存一个图像——yoda图像（id:myImg）并发送到web服务。我的储蓄部分有问题 有人能帮忙吗？我不确定一切都是正确的，因为当btnsave-Object#类没有方法“replace”index.html:187时，我得到了这个错误 代码 身体{ 边际：0px； 填充：0px； } 帆布{ 边框：1px实心#9C9898； } 功能更新（组、activeAnchor）{ var topLeft=group
身体{
边际：0px；
填充：0px；
}
帆布{
边框：1px实心#9C9898；
}
功能更新（组、activeAnchor）{
var topLeft=group.get（“.topLeft”）[0]；
var topRight=group.get（“.topRight”）[0]；
var bottomRight=group.get（“.bottomRight”）[0]；
var bottomLeft=group.get（“.bottomLeft”）[0]；
var image=group.get（“.image”）[0]；
//更新锚点位置
开关（activeAnchor.getName（））{
案例“左上”：
topRight.attrs.y=activeAnchor.attrs.y；
bottomLeft.attrs.x=activeAnchor.attrs.x；
打破
案例“topRight”：
topLeft.attrs.y=activeAnchor.attrs.y；
bottomRight.attrs.x=activeAnchor.attrs.x；
打破
案例“右下角”：
左下角.attrs.y=activeAnchor.attrs.y；
topRight.attrs.x=activeAnchor.attrs.x；
打破
案例“左下角”：
右下角.attrs.y=activeAnchor.attrs.y；
topLeft.attrs.x=activeAnchor.attrs.x；
打破
}
设置位置（topLeft.attrs.x，topLeft.attrs.y）；
var width=topRight.attrs.x-topLeft.attrs.x；
变量高度=左下角.attrs.y-左上角.attrs.y；
if（宽度和高度）{
图像。设置大小（宽度、高度）；
}
}
函数addAnchor（组、x、y、名称）{
var stage=group.getStage（）；
var layer=group.getLayer（）；
var anchor=新的动力学圆({
x:x，
y:y，
笔画：“666”，
填写：“ddd”，
冲程宽度：2，
半径：8，
姓名:姓名,，
德拉格布尔：是的
});
anchor.on（“dragmove”，function（））{
更新（组，本）；
layer.draw（）；
});
on（“mousedown touchstart”，函数（）{
组。可设置拖动（false）；
这是moveToTop（）；
});
anchor.on（“dragend”，function（））{
group.SetDragable（真）；
layer.draw（）；
});
//添加悬停样式
on（“mouseover”，function（））{
var layer=this.getLayer（）；
document.body.style.cursor=“指针”；
这是设置行程宽度（4）；
layer.draw（）；
});
anchor.on（“mouseout”，function（））{
var layer=this.getLayer（）；
document.body.style.cursor=“默认”；
这是设置行程宽度（2）；
layer.draw（）；
});
组。添加（锚定）；
}
函数loadImages（源、回调）{
var图像={}；
var loadedImages=0；
var numImages=0；
用于（源中的var src）{
numImages++；
}
用于（源中的var src）{
图像[src]=新图像（）；
图像[src].onload=function（）{
如果（++LoadeImage>=numImages）{
回调（图像）；
}
};
图像[src].src=源[src]；
}
}
函数初始化阶段（图像）{
var阶段=新的动力学阶段({
容器：“容器”，
宽度：578，
身高：400
});
var darthVaderGroup=新的动力学组({
x:270，
y:100，
德拉格布尔：是的
});
var yodaGroup=新的动力学组({
x:100，
y:110，
德拉格布尔：是的
});
var layer=新的动能层（）；
/*
*继续添加组
*到图层和到图层的图层
*阶段，使小组有知识
*它的层次和阶段
*/
图层添加（darthVaderGroup）；
图层添加（yodaGroup）；
阶段。添加（层）；
//达斯维德
var darthVaderImg=新动能图({
x:0,，
y:0，
image:images.darthVader，
宽度：200，
身高：138，
名称：“图像”
});
添加（darthVaderImg）；
addAnchor（darthVaderGroup，0,0，“左上”）；
addAnchor（darthVaderGroup，200,0，“右上角”）；
addAnchor（darthVaderGroup，200138，“右下角”）；
addAnchor（darthVaderGroup，0138，“左下角”）；
darthVaderGroup.on（“dragstart”，function（））{
这是moveToTop（）；
});
//尤达
var yodaImg=新的动力学图像({
x:0,，
y:0，
图片：images.yoda，
宽度：93，
身高：104，
名称：“图像”，
id:“myImg”
});
yodaGroup.add（yodaImg）；
addAnchor（yodaGroup，0，0，“左上”）；
addAnchor（yodaGroup，93,0，“右上角”）；
addAnchor（yodaGroup，93104，“右下角”）；
addAnchor（yodaGroup，0，104，“左下”）；
yodaGroup.on（“dragstart”，function（））{
这是moveToTop（）；
});
stage.draw（）；
$（“#btnSave”）。单击（函数（）{
var image=stage.get（“#myImg”）[0]；
image=image.replace（'data:image/png；base64'，''）；
$.ajax({
键入：“POST”，
url:domain+'/Services/WS.asmx/UploadImage',，
数据：'{“imageData”：“'+image+'''''}'，
contentType:'application/json；charset=utf-8'，
数据类型：“json”，
成功：功能（msg）{
警报（msg.d）；
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
<script>
function update(group, activeAnchor) {
var topLeft = group.get(".topLeft")[0];
var topRight = group.get(".topRight")[0];
var bottomRight = group.get(".bottomRight")[0];
var bottomLeft = group.get(".bottomLeft")[0];
var image = group.get(".image")[0];
// update anchor positions
switch (activeAnchor.getName()) {
case "topLeft":
topRight.attrs.y = activeAnchor.attrs.y;
bottomLeft.attrs.x = activeAnchor.attrs.x;
break;
case "topRight":
topLeft.attrs.y = activeAnchor.attrs.y;
bottomRight.attrs.x = activeAnchor.attrs.x;
break;
case "bottomRight":
bottomLeft.attrs.y = activeAnchor.attrs.y;
topRight.attrs.x = activeAnchor.attrs.x;
break;
case "bottomLeft":
bottomRight.attrs.y = activeAnchor.attrs.y;
topLeft.attrs.x = activeAnchor.attrs.x;
break;
}
image.setPosition(topLeft.attrs.x, topLeft.attrs.y);
var width = topRight.attrs.x - topLeft.attrs.x;
var height = bottomLeft.attrs.y - topLeft.attrs.y;
if(width && height) {
image.setSize(width, height);
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: "#666",
fill: "#ddd",
strokeWidth: 2,
radius: 8,
name: name,
draggable: true
});
anchor.on("dragmove", function() {
update(group, this);
layer.draw();
});
anchor.on("mousedown touchstart", function() {
group.setDraggable(false);
this.moveToTop();
});
anchor.on("dragend", function() {
group.setDraggable(true);
layer.draw();
});
// add hover styling
anchor.on("mouseover", function() {
var layer = this.getLayer();
document.body.style.cursor = "pointer";
this.setStrokeWidth(4);
layer.draw();
});
anchor.on("mouseout", function() {
var layer = this.getLayer();
document.body.style.cursor = "default";
this.setStrokeWidth(2);
layer.draw();
});
group.add(anchor);
}
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function initStage(images) {
var stage = new Kinetic.Stage({
container: "container",
width: 578,
height: 400
});
var darthVaderGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var yodaGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
var layer = new Kinetic.Layer();
/*
* go ahead and add the groups
* to the layer and the layer to the
* stage so that the groups have knowledge
* of its layer and stage
*/
layer.add(darthVaderGroup);
layer.add(yodaGroup);
stage.add(layer);
// darth vader
var darthVaderImg = new Kinetic.Image({
x: 0,
y: 0,
image: images.darthVader,
width: 200,
height: 138,
name: "image"
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, "topLeft");
addAnchor(darthVaderGroup, 200, 0, "topRight");
addAnchor(darthVaderGroup, 200, 138, "bottomRight");
addAnchor(darthVaderGroup, 0, 138, "bottomLeft");
darthVaderGroup.on("dragstart", function() {
this.moveToTop();
});
// yoda
var yodaImg = new Kinetic.Image({
x: 0,
y: 0,
image: images.yoda,
width: 93,
height: 104,
name: "image",
id: "myImg"
});
yodaGroup.add(yodaImg);
addAnchor(yodaGroup, 0, 0, "topLeft");
addAnchor(yodaGroup, 93, 0, "topRight");
addAnchor(yodaGroup, 93, 104, "bottomRight");
addAnchor(yodaGroup, 0, 104, "bottomLeft");
yodaGroup.on("dragstart", function() {
this.moveToTop();
});
stage.draw();
$("#btnSave").click(function () {
var image = stage.get("#myImg")[0];
image = image.replace('data:image/png;base64,', '');
$.ajax({
type: 'POST',
url: domain + '/Services/WS.asmx/UploadImage',
data: '{ "imageData" : "' + image + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert(msg.d);
}
});
});
}
window.onload = function() {
var sources = {
darthVader: "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg",
yoda: "http://www.html5canvastutorials.com/demos/assets/yoda.jpg"
};
loadImages(sources, initStage);
};
</script>
</head>
<body onmousedown="return false;">
<div id="container"></div>
<input type="button" id="btnSave" name="btnSave" value="Save the canvas to server" />
</body>
</html>
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/WS/SaveObject.asmx/fSaveToDB"),
data: JSON.stringify({ _obj: this }),
dataType: "json"
});