jquery.drawr实现模仿Photoshop画板涂鸦效果代码

代码语言:html

所属分类:其他

代码描述:jquery.drawr实现模仿Photoshop画板涂鸦效果代码

代码标签: jquery drawr 模仿 Photoshop 画板 涂鸦

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/materialdesignicons.4.0.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
</head>

<body>
    <div id="drawr-container" style="width:100vw;height:100vh;">
        <canvas class="demo-canvas drawr-test1"></canvas>
    </div>
    <input type="file" id="file-picker" style="display:none;">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.drawr.combined.js"></script>
    <script type="text/javascript">
        $("#drawr-container .demo-canvas").drawr({
            "enable_tranparency": true
        });

        $(".demo-canvas").drawr("start");

        //add custom save button.
        var buttoncollection = $("#drawr-container .demo-canvas").drawr("b.........完整代码请登录后点击上方下载按钮下载查看

网友评论0