locked
how to achieve Painter in webforms RRS feed

  • Question

  • User857040580 posted

    Hi

    I want to do some drawing on image in some webpages(point,circle,line), just like Painter of Windows.

    how can i work out this problem,pls give me some methods ,sample codes or materials.

    thanks a lot

    Thursday, May 2, 2019 3:38 AM

All replies

  • User288213138 posted

    Hi  yugiant,
     
    You can use the jQuery Sketch plugin to draw on image in some webpages, I wrote a demo that you can use as a reference.
     
    The code :

    <div class="tools">
                    <a href="#colors_sketch" data-tool="marker">Marker</a>
                    <a href="#colors_sketch" data-tool="eraser">Eraser</a>
                </div>
                <br />
                <canvas id="colors_sketch" width="500" height="200"></canvas>   
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="https://cdn.rawgit.com/mobomo/sketch.js/master/lib/sketch.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $('#colors_sketch').sketch();
                $(".tools a").eq(0).attr("style", "color:#000");
                $(".tools a").click(function () {
                    $(".tools a").removeAttr("style");
                    $(this).attr("style", "color:#000");
                });
            });
            function ConvertToImage(btnSave) {
                var base64 = $('#colors_sketch')[0].toDataURL();
                $("[id*=hfImageData]").val(base64);
                __doPostBack(btnSave.name, "");
            };
    </script>
    

    The Result:

    Best Regards,

    Sam

    Thursday, May 2, 2019 8:22 AM
  • User857040580 posted

    Hi,samwu

    the image above is my aim,i want to draw in an image online,not draw through program

    thanks a lot

    Friday, May 3, 2019 2:34 PM
  • User409696431 posted

    There is no image in your post.

    Also, what do you mean "draw in an image online" vs "not draw through program"?  Anything involving drawing on an image online will require programming.

    The example given by samwu ( https://www.jqueryscript.net/demo/Canvas-Based-Drawing-Plugin-with-jQuery-Sketch/ ) can draw on an image online.  Click the link and scroll down through the examples to the cat image, and draw on it.

    Friday, May 3, 2019 10:25 PM
  • User857040580 posted

    Hi,

    Maybe my expression is not accurate enough. What I want to achieve is to mark points, arbitrary curves, straight lines, etc. at any time on the background image.
    I saw your demo, but the project I want to do can only be run on the intranet and cannot access the Internet. I think the canvas in html5 can help me realize my idea. Which functions can be used to achieve my goal?

    thanks a lot

    Saturday, May 4, 2019 12:53 PM
  • User409696431 posted

    Is this on a website?  If it is, there is no difference between intranet and internet as far as using JQuery.  It runs in the browser.  Download the needed jquery files into your website and use them.

    As for HTML5 canvas - that's not really an asp.net topic.  Creating a drawing app using HTML5 canvas can be done (example: http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/ ) but that example results in something very similar to the JQuery Sktech plug-in already referenced.  It would be up to you to code it differently if that's not what you want.

    Saturday, May 4, 2019 3:48 PM
  • User857040580 posted

    Hi,samwu and KathyW:

    According to your suggestion,i use H5 and canvas to work out my problem.

    Thank you for your help.

    Thanks a lot.

    Tuesday, May 7, 2019 2:09 AM
  • User288213138 posted

    Hi yugiant,
     

    No problem, It's my pleasure to help you.


    Best Regard,
    Sam

    Tuesday, May 7, 2019 6:03 AM