怎么把图片放到画布上。。。。。。。。。。。

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


通过赋值路径是这样的
图片说明
我想通过赋值路径实现这样的,因为痛过赋值给表单路径可以控制图片大小
实际效果应该是这样图片说明
求 大牛

1个回答

我怎么没见到你的canvas呢?

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐