%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
专属
href="${pageContext.request.contextPath}/inc/wColorPicker.css" />
href="${pageContext.request.contextPath}/wPaint.css" />
js涂鸦专属编辑图片
<table>
<tr>
<td>
<div id="wPaint2"
style="position:relative;width:1000px;height:1000px; background:#CACACA; border:solid black 1px;"></div>
<img id="canvasImage" style="width: 800px; height: 800px;">
</td>
<td><img id="canvasImage2" src="" /></td>
</tr>
<tr>
<td colspan="2">
<div>
<div id="box"></div>
<input type="button" value="保存" onClick="saveImage2()"
onblur="saveImage2()" /> <input type="button" value="提交"
onblur="saveImage2()" onclick="saveImage2()">
</div>
<br />
</td>
</tr>
</table>
<br />
<br />
<script type="text/javascript">
$("#wPaint2")
.wPaint(
{
menuOrientation : 'vertical',
//imageBg : '${pageContext.request.contextPath}/images/demo/bird.png'
imageBg : $('#canvasImage').attr('src','${pageContext.request.contextPath}/images/demo/bird.png')
});
function saveImage2() {
var imageData2 = $("#wPaint2").wPaint("image");
$.ajax({
url : 'save.jsp',
type : 'post',
//data:"imageData2"+imageData2,
//dataType:"text",
data : {
"imageData2" : imageData2
},
dataType : "json",
success : function(result) {
alert(result);
if ("ture" == $.trim(result)) {
$("#box").html("保存成功");
} else {
$("#box").html("保存失败");
}
},
error : function() {
$("#box").html("保存成功");
}
});
$("#canvasImage2").attr('src', imageData2);
}
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
</script>
</form>
通过赋值路径是这样的
我想通过赋值路径实现这样的，因为痛过赋值给表单路径可以控制图片大小
实际效果应该是这样
求 大牛
