javascript - html canvas Drawing tool and highlight fucntion -
i javascript function copy paste image clipboard html canvas, futher have function let user draw(highlight) on image pasted on canvas. however, drawing tool function seems override copy paste function anonymous. need make these 2 functions operate.
this function copy clipboard.
function clipboard_class(canvas_id, autoresize) { alert("blah"); var _self = this; var canvas = document.getelementbyid(canvas_id); var ctx = document.getelementbyid(canvas_id).getcontext("2d"); var ctrl_pressed = false; var reading_dom = false; var text_top = 15; var pastecatcher; var paste_mode; //handlers document.addeventlistener('keydown', function (e) { _self.on_keyboard_action(e); }, false); //firefox fix document.addeventlistener('keyup', function (e) { _self.on_keyboardup_action(e); }, false); //firefox fix document.addeventlistener('paste', function (e) { _self.paste_auto(e); }, false); //official paste handler //constructor - prepare this.init = function () { //if using auto if (window.clipboard) return true; pastecatcher = document.createelement("div"); pastecatcher.setattribute("id", "paste_ff"); pastecatcher.setattribute("contenteditable", ""); pastecatcher.style.csstext = 'opacity:0;position:fixed;top:0px;left:0px;'; pastecatcher.style.marginleft = "-20px"; pastecatcher.style.width = "10px"; document.body.appendchild(pastecatcher); document.getelementbyid('paste_ff').addeventlistener('domsubtreemodified', function () { if (paste_mode == 'auto' || ctrl_pressed == false) return true; //if paste handle failed - capture pasted object manually if (pastecatcher.children.length == 1) { if (pastecatcher.firstelementchild.src != undefined) { //image _self.paste_createimage(pastecatcher.firstelementchild.src); } } //register cleanup after time. settimeout(function () { pastecatcher.innerhtml = ''; }, 20); }, false); }(); //default paste action this.paste_auto = function (e) { paste_mode = ''; pastecatcher.innerhtml = ''; var plain_text_used = false; if (e.clipboarddata) { var items = e.clipboarddata.items; if (items) { paste_mode = 'auto'; //access data directly (var = 0; < items.length; i++) { if (items[i].type.indexof("image") !== -1) { //image var blob = items[i].getasfile(); var urlobj = window.url || window.webkiturl; var source = urlobj.createobjecturl(blob); this.paste_createimage(source); } } e.preventdefault(); } else { //wait domsubtreemodified event //https://bugzilla.mozilla.org/show_bug.cgi?id=891247 } } }; //on keyboard press - this.on_keyboard_action = function (event) { k = event.keycode; //ctrl if (k == 17 || event.metakey || event.ctrlkey) { if (ctrl_pressed == false) ctrl_pressed = true; } //c if (k == 86) { if (document.activeelement != undefined && document.activeelement.type == 'text') { //let user paste input return false; } if (ctrl_pressed == true && !window.clipboard) pastecatcher.focus(); } }; //on kaybord release this.on_keyboardup_action = function (event) { k = event.keycode; //ctrl if (k == 17 || event.metakey || event.ctrlkey || event.key == 'meta') ctrl_pressed = false; }; //draw image this.paste_createimage = function (source) { var pastedimage = new image(); pastedimage.onload = function () { if (autoresize == true) { //resize canvas canvas.width = pastedimage.width; canvas.height = pastedimage.height; } else { //clear canvas ctx.clearrect(0, 0, canvas.width, canvas.height); } ctx.drawimage(pastedimage, 0, 0); }; pastedimage.src = source; }; } this drawing tool function
if (window.addeventlistener) { window.addeventlistener('load', function () { var canvas, context, canvaso, contexto; // active tool instance. var tool; var tool_default = 'line'; function init() { // find canvas element. canvaso = document.getelementbyid('my_canvas_1'); if (!canvaso) { alert('error: cannot find canvas element!'); return; } if (!canvaso.getcontext) { alert('error: no canvas.getcontext!'); return; } // 2d canvas context. contexto = canvaso.getcontext('2d'); if (!contexto) { alert('error: failed getcontext!'); return; } // add temporary canvas. var container = canvaso.parentnode; canvas = document.createelement('canvas'); if (!canvas) { alert('error: cannot create new canvas element!'); return; } canvas.id = 'imagetemp'; canvas.width = canvaso.width; canvas.height = canvaso.height; container.appendchild(canvas); context = canvas.getcontext('2d'); // tool select input. var tool_select = document.getelementbyid('dtool'); if (!tool_select) { alert('error: failed dtool element!'); return; } tool_select.addeventlistener('change', ev_tool_change, false); // activate default tool. if (tools[tool_default]) { tool = new tools[tool_default](); tool_select.value = tool_default; } // attach mousedown, mousemove , mouseup event listeners. canvas.addeventlistener('mousedown', ev_canvas, false); canvas.addeventlistener('mousemove', ev_canvas, false); canvas.addeventlistener('mouseup', ev_canvas, false); } // general-purpose event handler. function determines mouse // position relative canvas element. function ev_canvas(ev) { if (ev.layerx || ev.layerx == 0) { // firefox ev._x = ev.layerx; ev._y = ev.layery; } else if (ev.offsetx || ev.offsetx == 0) { // opera ev._x = ev.offsetx; ev._y = ev.offsety; } // call event handler of tool. var func = tool[ev.type]; if (func) { func(ev); } } // event handler changes made tool selector. function ev_tool_change(ev) { if (tools[this.value]) { tool = new tools[this.value](); } } // function draws #imagetemp canvas on top of #my_cavas_1, after // #imagetemp cleared. function called each time when user // completes drawing operation. function img_update() { contexto.drawimage(canvas, 0, 0); context.clearrect(0, 0, canvas.width, canvas.height); } // object holds implementation of each drawing tool. var tools = {}; // drawing pencil. tools.pencil = function () { var tool = this; this.started = false; // called when start holding down mouse button. // starts pencil drawing. this.mousedown = function (ev) { context.beginpath(); context.moveto(ev._x, ev._y); tool.started = true; }; // function called every time move mouse. obviously, // draws if tool.started state set true (when holding down // mouse button). this.mousemove = function (ev) { if (tool.started) { context.lineto(ev._x, ev._y); context.stroke(); } }; // called when release mouse button. this.mouseup = function (ev) { if (tool.started) { tool.mousemove(ev); tool.started = false; img_update(); } }; }; // rectangle tool. tools.rect = function () { var tool = this; this.started = false; this.mousedown = function (ev) { tool.started = true; tool.x0 = ev._x; tool.y0 = ev._y; }; this.mousemove = function (ev) { if (!tool.started) { return; } var x = math.min(ev._x, tool.x0), y = math.min(ev._y, tool.y0), w = math.abs(ev._x - tool.x0), h = math.abs(ev._y - tool.y0); context.clearrect(0, 0, canvas.width, canvas.height); if (!w || !h) { return; } context.strokerect(x, y, w, h); }; this.mouseup = function (ev) { if (tool.started) { tool.mousemove(ev); tool.started = false; img_update(); } }; }; // line tool. tools.line = function () { var tool = this; this.started = false; this.mousedown = function (ev) { tool.started = true; tool.x0 = ev._x; tool.y0 = ev._y; }; this.mousemove = function (ev) { if (!tool.started) { return; } context.clearrect(0, 0, canvas.width, canvas.height); context.beginpath(); context.moveto(tool.x0, tool.y0); context.lineto(ev._x, ev._y); context.stroke(); context.closepath(); }; this.mouseup = function (ev) { if (tool.started) { tool.mousemove(ev); tool.started = false; img_update(); } }; }; init(); }, false); } this html canvas tag
<canvas id="my_canvas_1" width="300" height="300" onclick="clipboard_class('my_canvas_1',true);"></canvas>
Comments
Post a Comment