how to achieve Painter in webforms

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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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.

Answer 6

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.

Answer 7

User288213138 posted

Hi yugiant,
 

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

Best Regard,
Sam