javascript - drawImage draw the image on canvas but after any event it disappear image fabricjs -


i drawing image on canvas via drawimage method, draw image when event called become blank , disappear. tried different ways not success. want show image on canvas , not disappear, because convas canvas dataurl become blank.

my working link

please know please guide me going wrong. below code.

<!doctype html>  <html>  <head>  <title>canvas.dataurl tainted(polluted) issue</title>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  <script src="https://technology-architects.com/daulat/customizer_assets/js/bootstrap-slider.js"></script>   <script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/js/jquery.liteuploader.js"></script>   <script type="text/javascript" src="https://files.codepedia.info/files/uploads/iscripts/html2canvas.js"></script>   <script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/js/custom.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>   <script src="https://technology-architects.com/daulat/customizer_assets/cartjs/cart.js"></script>   <script src="https://technology-architects.com/daulat/customizer_assets/fabric-js/custom/fabricextensions.js"></script>   <script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/bgrins-spectrum/spectrum.js"></script>  <script type="text/javascript" src="https://technology-architects.com/daulat/customizer_assets/js/fabric.curvedtext.js"></script>      </head>  <body>    <style>  .canvas-container{display:inline-block;vertical-align:middle;}  </style>    <canvas id="canvas" height=758 width=497 style="border:1px solid lightgrey;display:inline-block;"></canvas>    <img id="curveimg" src="http://production.technology-architects.com/doulat/curtains_new/3d_view/images/sample.png" alt="" style="display:inline-block;vertical-align:middle;">  <button type="button" id="clickme">click me!</button>    <script>      var canvas = new fabric.canvas('canvas');      var offsety=[0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,29.5,30,30.1,30.2,30.3,30.4,30.5,30.6,30.7,30.8,30.9,30,29.5,29,28,27,26,25,24,23,22,21,20,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0]        var ctx = canvas.getcontext("2d");    var immg = 'http://production.technology-architects.com/doulat/curtains_new/3d_view/images/sample.png';            fabric.util.loadimage(immg, function(img) {                      for(var x=0;x<offsety.length;x++){              ctx.drawimage(img,                  // clip 1 pixel wide slice image                  x,0,1,img.height,                  // draw slice y-offset                  x,offsety[x],1,img.height              );                       }           },null, {crossorigin:'anonymous'});   	canvas.renderall();  	  	  	  	  	$(document).on('click','#clickme',function(){  	var imagedatafinal = canvas.todataurl('image/png');  	console.log(imagedatafinal);  	$('#curveimg').attr('src',imagedatafinal);  	var imgdatafinal = imagedatafinal.replace(/^data:image\/(png|jpg);base64,/, "");  				  //ajax call save image inside folder  				  $.ajax({  					url: '../save_image.php',  					data: {  						 imgdata:imgdatafinal  						 },  					type: 'post',  					success: function (response) {  					$('#curveimg').attr('src',response);  					console.log(response);  					}  				  });  	});  	   </script>  </body>  </html>

check fiddle.

you getting problem because drawing in context , not adding canvas object. after drawing in context context data using ctx.getimagedata(0, 0, img.width, img.height); after create canvas element , put image datac.getcontext('2d').putimagedata(data, 0, 0); create fabricjs image object canvas image data.

*crossorigin problem there fiddle not working, can check in local server


Comments

Post a Comment

Popular posts from this blog

python - Selenium remoteWebDriver (& SauceLabs) Firefox moseMoveTo action exception -

while performing simple hover test on firefox through selenium (3.4.0) python bindings (3.4.3) using of available os in saucelabs (except linux, latest available firefox version old), performing following actionchain: hover = actionchains(driver) hover.move_to_element(elm_men_menu).perform() it throws following error: taceback: file [...] in testhover hover.perform() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 80, in perform action() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 290, in <lambda> command.move_to, {'element': to_element.id})) file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/remote/webdriver.py", line 256, in execute self.error_handler.check_response(response) file "/usr/local/lib/python2.7/...
Read more

html - How to custom Bootstrap grid height? -

why bootstrap grid has height 591.067 ? did height came ? .main-post { padding: 20px; background-color: #fff; border: 1px solid #d8d8d8; margin-bottom: 100px; } .main-post .post-categories { margin-bottom: 10px } .main-post h3 { margin: 0 0 10px; color: #777; letter-spacing: -1px; font-weight: bold } .main-post .post-author, .main-post .post-date, .main-post .post-comments { font-size: 12px } .main-post img { display: block; margin: 10px 0; } .main-post .post-summary { line-height: 1.7; color: #888 } .main-post { color: #999 } <div class="col-sm-6"> <div class="main-post"> <h3 class="post-title"> <a href="#"> post title </a> </...
Read more

transpose - Maple isnt executing function but prints function term -

im using maple im in worksheetmode tried using maple input , 2d input , want transpose matrix a: := `<|>`(`<,>`(1, .5, -2), `<,>`(.5, 9/4+b, 5+3*b), `<,>`(-2, 5+3*b, 18+9*b+4*a)); b:= transpose(a); when exectute sheet dont translated values, there same input. matrix looks same input matrix plus function term. you can see picture in following link: why arent functions executed? meanwhile b:=a^+ doing right way , transposed matrix. other functions return function body instead needed values... if using 2d input mode (the default) space you've got between transpose , bracketed (b) interpreted multiplcation. rid of such space. also, either load package @ start of document like, with(linearalgebra): before calling transpose command package, or call it's full name like, linearalgebra:-transpose(b);
Read more