Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,183
    Thanks
    15
    Thanked 253 Times in 253 Posts

    Teaming up javasacript and HTML5 canvas.

    Improved code.
    Code:
    <!DOCTYPE html>
    <head>
    <title>Test Canvas</title>
    <script type="text/javascript">
    //Alerts to errors.
    window.onerror=function(msg, url, linenumber){var logerror='Error message: ' + msg + '. Url: ' + url + 'Line Number: ' + linenumber;alert(logerror);return false}
    </script>
    <script type="text/javascript" src="http://www.myphotowizard.net/Files/miniAPI.js"></script>
    
    <style type="text/css">
    body
    {
    font-family: Arial;
    background: rgb(32,32,32);
    margin: 0 auto;
    color: aqua;
    font-size: 24px;
    }
    textarea, input
    {
    padding: 4px;
    font-size: 24px;
    background: navy;
    color: white;
    }
    .explain
    {
    color: white;
    }
    #imgdata
    {
    color: white;
    font-size: 24px;
    }
    #myCanvas
    {
    z-index: auto;
    }
    </style>
    <body>
    
    <canvas id="myCanvas" onclick="buildCanvas();"></canvas>
    <p id="imgdata">Image Data</p>
    <form>
    <p />Use in fullscreen mode, save the image with screen capture in full screen mode<br />
    Font sizes can be px, em, el, or pt, but units must be specified.<br />
    Colors can be rgb, # colors, or named colors.<br />
    Duplicate the line and modify to make as many lines of text as you want.
    <br />Click the image to make changes. Link to any image on the web.</p>Text, Font size and family, Outline width, Left, Top, Text color, Outline color<br />
    <textarea id="myinput" cols=60 rows=10 >Hello World !|120px Impact|2|160|120|red|white
    </textarea><br />
    <p>Link to image.</p>
    <input type="text" size=60 id="mylink"  value='http://www.myphotowizard.net/Canvas/sample.jpg'  /><br/>
    </form>
    <p class="explain" />
    <p class="explain" />
    <script type="text/javascript">
    var imageObj = new Image();
    imageObj.src = byId("mylink").value;
    function buildCanvas(){
    var canvas = byId('myCanvas');
    var context = canvas.getContext('2d');
    var theinput = byId("myinput").value;
    var lnk = byId("mylink").value;
    //alert(theinput);
    var imageObj = new Image();
    imageObj.src = lnk;
    byId("imgdata").innerHTML = imageObj.width+"x"+imageObj.height;
    	if(imageObj.width!=0 || imageObj.height!=0)
    	{
          byId("myCanvas").width=imageObj.width;
          byId("myCanvas").height=imageObj.height;
    	}
    	else {
    	byId("myCanvas").width=120;
    	byId("myCanvas").height=120;
    	}
     var vals = theinput.split("\n");
     context.drawImage( imageObj, 0, 0);
    		for(i=0;i<vals.length;i++)
    		{
    	var b = vals[i].split("|");
    	//alert(b);
    	context.font = b[1];
    	context.lineWidth = b[2];
    	context.fillStyle = b[5];
    	context.fillText(b[0],b[3],b[4]);
    	context.strokeStyle =  b[6];
    	context.strokeText(b[0],b[3],b[4]);
    		}};
    	
    imageObj.onload=function(){buildCanvas()}
    	</script>
    </body>
    </html>
    Last edited by DrDOS; 07-08-2013 at 11:10 AM. Reason: Improved the code. Changed the separators.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by DrDOS View Post
    This page lets you use them to put text on images, you can add as many lines of text as you want, with different fonts, sizes, styles and colors as you want.
    Interesting script, although it doesn't work quite as intended:

    • The multiple lines functionality described doesn't work at all.
    • Setting the outline width to zero results in a single-pixel outline. (I tried to set it to zero because the outlines look messed up for the font Lucida Handwriting. Not sure if that's a bug.)
    • Pasting the URL for an SVG image into the image box results in a lot of alert boxes with error messages.
    • There's no way to enter a semicolon as a text character.

    Also have a few HTML errors. And 1000+ CSS parsing errors due to the script accompanied by many warnings in the Firefox console (Ctrl+Shift+K). Guessing these numerous errors are the reason why the page is so sluggish. (I kept getting scroll delays.)
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,183
    Thanks
    15
    Thanked 253 Times in 253 Posts
    Quote Originally Posted by Arbitrator View Post
    Interesting script, although it doesn't work quite as intended:

    • The multiple lines functionality described doesn't work at all.
    • Setting the outline width to zero results in a single-pixel outline. (I tried to set it to zero because the outlines look messed up for the font Lucida Handwriting. Not sure if that's a bug.)
    • Pasting the URL for an SVG image into the image box results in a lot of alert boxes with error messages.
    • There's no way to enter a semicolon as a text character.

    Also have a few HTML errors. And 1000+ CSS parsing errors due to the script accompanied by many warnings in the Firefox console (Ctrl+Shift+K). Guessing these numerous errors are the reason why the page is so sluggish. (I kept getting scroll delays.)
    No, this won't work for SVG or canvas images, just jpegs and such. And you can't use the field separators in the text, or other data, that's prety much a given. And there seems to be no escape character for use in canvas data. As for the multi line thing not working, I can't explain. It works very well on every browser I've tried. Opera, Chrome and Firefox. I haven't tried IE.

    The single pixel outline is a default behavior of canvas. I've changed the field separators to the better | which isn't used for much else. Are you on Windows, because I'm on Linux and it works fairly well, except Firefox has some problems. It works really well on Chrome, Opera throws a JS error, but is very cryptic about it. If you try to right click and download the image with Firefox the browser gets buggy, but you may get the image.

    It's not presented as something perfected, and a lot has been left out, but someone may be able to make it into something useful.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by DrDOS View Post
    No, this won't work for SVG or canvas images, just jpegs and such.
    Right, but it would be more intuitive to have some kind of readable error message and a restriction that prevents script execution.

    Quote Originally Posted by DrDOS View Post
    And you can't use the field separators in the text, or other data, that's prety much a given. And there seems to be no escape character for use in canvas data.
    One solution would to be to require a quoted string to input this character. Another would involve separating the arguments into separate form fields so that no character separator is required.

    Quote Originally Posted by DrDOS View Post
    As for the multi line thing not working, I can't explain. It works very well on every browser I've tried. Opera, Chrome and Firefox. I haven't tried IE.
    Apparently, this functionality does work... in most browsers. My mistake. I copied and pasted the existing line, but forgot to modify the position arguments; all of the text I was adding was overlapping the existing text.

    I tested Chrome 27, Firefox 22, and IE10 and it worked fine. Not so much in Opera 15 (with the new Blink rendering engine) where it doesn't work at all.

    Quote Originally Posted by DrDOS View Post
    The single pixel outline is a default behavior of canvas.
    I didn't know that. I guess I'll have to look into seeing if there's any way to eliminate it.

    (I'm less familiar with the canvas element and tend to use SVG instead since I don't like the canvas element's rasterization. SVG might be better for this demo too actually. I wrote, for example, this demo, in canvas only to get ugly display artifacts when I was resizing the generated image and ended up throwing all of that code away and rewriting it for SVG to get the desired result.)

    Quote Originally Posted by DrDOS View Post
    Are you on Windows, because I'm on Linux and it works fairly well, except Firefox has some problems. It works really well on Chrome, Opera throws a JS error, but is very cryptic about it. If you try to right click and download the image with Firefox the browser gets buggy, but you may get the image.
    I'm on Windows 8.

    I'd be more concerned about the errors and warnings in Firefox 22. When I run your code and leave the tab open for a short time while I browse other pages, it causes a substantial degrade in my browsing experience because the script is generating a bunch of errors (and maybe doing other non-erroneous things) that it shouldn't be doing when the page isn't even being used.

    Quote Originally Posted by DrDOS View Post
    It's not presented as something perfected, and a lot has been left out, but someone may be able to make it into something useful.
    So I assumed, but I thought some suggestions might be helpful. I often code little projects like these and then come back to them repeatedly later to make improvements. It substantially improves my coding skills.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,183
    Thanks
    15
    Thanked 253 Times in 253 Posts
    Quote Originally Posted by Arbitrator View Post
    Right, but it would be more intuitive to have some kind of readable error message and a restriction that prevents script execution.

    One solution would to be to require a quoted string to input this character. Another would involve separating the arguments into separate form fields so that no character separator is required.

    Apparently, this functionality does work... in most browsers. My mistake. I copied and pasted the existing line, but forgot to modify the position arguments; all of the text I was adding was overlapping the existing text.

    I tested Chrome 27, Firefox 22, and IE10 and it worked fine. Not so much in Opera 15 (with the new Blink rendering engine) where it doesn't work at all.

    I didn't know that. I guess I'll have to look into seeing if there's any way to eliminate it.

    (I'm less familiar with the canvas element and tend to use SVG instead since I don't like the canvas element's rasterization. SVG might be better for this demo too actually. I wrote, for example, this demo, in canvas only to get ugly display artifacts when I was resizing the generated image and ended up throwing all of that code away and rewriting it for SVG to get the desired result.)

    I'm on Windows 8.

    I'd be more concerned about the errors and warnings in Firefox 22. When I run your code and leave the tab open for a short time while I browse other pages, it causes a substantial degrade in my browsing experience because the script is generating a bunch of errors (and maybe doing other non-erroneous things) that it shouldn't be doing when the page isn't even being used.

    So I assumed, but I thought some suggestions might be helpful. I often code little projects like these and then come back to them repeatedly later to make improvements. It substantially improves my coding skills.
    I've only been working on this for part of three or four days but I thought I would throw it out for other people who might want to work with it. If you go to my site and upload an image, use Firefox or Chrome to make sure, or test with IE, upload an image, then go to the 'Make an image inset' you will see how I'm using SVG for display purposes but on the server, where the actual work is done I use Imagemagick. It too has the annoying default behavior, but I wrote a workaround. The actual behavior is 0px = 2px, 1px = 1px, 2px = 2px, 3px = 4px, etc. very annoying.

    I know that a lot of things need to be done to make this workable, but my problem is, how much time and effort do I want to spend on it when I have methods that will put 100 lines of text on an image flawlessly and easily, while it only does things one line at a time and you have trouble saving the files?

    Using separate form fields would just destroy the intuitive and easy process that editing is now, better to just not use the field separator.
    Last edited by DrDOS; 07-08-2013 at 11:15 AM.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •