Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="row">
- <div class="col-lg-12">
- <h1 class="page-header">
- Modifica sketch
- </h1>
- </div>
- </div>
- <div class="row">
- <div class="col-md-6" style="position: inherit!important;">
- <canvas id="can" width="800" height="600" style="position:relative; background: url('<?=$background?>') no-repeat; background-size: cover;"></canvas>
- </div>
- <div class="col-md-6">
- <h2>Seleziona il colore</h2>
- <a href="#" id="green" onclick="color(this)"><i style="color: green;" class="fa fa-paint-brush fa-2x"></i></a>
- <a href="#" id="blue" onclick="color(this)"><i style="color: blue;" class="fa fa-paint-brush fa-2x"></i></a>
- <a href="#" id="red" onclick="color(this)"><i style="color: red;" class="fa fa-paint-brush fa-2x"></i></a>
- <a href="#" id="yellow" onclick="color(this)"><i style="color: yellow;" class="fa fa-paint-brush fa-2x"></i></a>
- <a href="#" id="orange" onclick="color(this)"><i style="color: orange;" class="fa fa-paint-brush fa-2x"></i></a>
- <a href="#" id="black" onclick="color(this)"><i style="color: black;" class="fa fa-paint-brush fa-2x"></i></a>
- <a href="#" id="white" onclick="color(this)"><i style="color: black;" class="fa fa-eraser fa-2x"></i></a><br /><br />
- <?php echo form_open("pages/save_sketch"); ?>
- <img id="canvasimg" style="display:none;">
- <input type="hidden" name="segment" id="segment" value="<?=$this->uri->segment('3')?>" />
- <input type="hidden" name="sketch" id="sketch" value="" />
- <input id="btn" name="btn_update" type="submit" class="btn btn-success" value="Salva" />
- <!-- <button id="btn" class="btn btn-success" onclick="save()"><i class="fa fa-check"></i> Salva</button> -->
- <!-- <button id="clr" class="btn btn-danger" onclick="erase()"><i class="fa fa-ban"></i> Cancella</button> -->
- <?php echo form_close(); ?>
- <?php echo $this->session->flashdata('msg'); ?>
- </div>
- </div>
- <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
- <script type="text/javascript">
- $( document ).ready(function() {
- init();
- var saved = "<?=$saved?>";
- if(saved != "") {
- loadCanvas(saved);
- }
- $("#btn").click(function(e) {
- // e.preventDefault();
- var dataURL = canvas.toDataURL();
- $("#canvasimg").attr("src", dataURL);
- $("#sketch").attr("value", $("#canvasimg").attr("src"));
- });
- });
- var canvas, ctx, flag = false,
- prevX = 0,
- currX = 0,
- prevY = 0,
- currY = 0,
- dot_flag = false;
- var x = "red",
- y = 2;
- function loadCanvas(dataURL) {
- var canvas = document.getElementById('can');
- var context = canvas.getContext('2d');
- var imageObj = new Image();
- imageObj.onload = function() {
- context.drawImage(this, 0, 0);
- };
- imageObj.src = dataURL;
- }
- function init() {
- canvas = document.getElementById('can');
- ctx = canvas.getContext("2d");
- w = canvas.width;
- h = canvas.height;
- canvas.addEventListener("mousemove", function (e) {
- findxy('move', e)
- }, false);
- canvas.addEventListener("mousedown", function (e) {
- findxy('down', e)
- }, false);
- canvas.addEventListener("mouseup", function (e) {
- findxy('up', e)
- }, false);
- canvas.addEventListener("mouseout", function (e) {
- findxy('out', e)
- }, false);
- }
- function color(obj) {
- switch (obj.id) {
- case "green":
- x = "green";
- break;
- case "blue":
- x = "blue";
- break;
- case "red":
- x = "red";
- break;
- case "yellow":
- x = "yellow";
- break;
- case "orange":
- x = "orange";
- break;
- case "black":
- x = "black";
- break;
- case "white":
- x = "white";
- break;
- }
- if (x == "white") y = 14;
- else y = 2;
- }
- function draw() {
- ctx.beginPath();
- ctx.moveTo(prevX, prevY);
- ctx.lineTo(currX, currY);
- ctx.strokeStyle = x;
- ctx.lineWidth = y;
- ctx.stroke();
- ctx.closePath();
- }
- function erase() {
- var m = confirm("Want to clear");
- if (m) {
- ctx.clearRect(0, 0, w, h);
- document.getElementById("canvasimg").style.display = "none";
- }
- }
- function save() {
- document.getElementById("canvasimg").style.border = "2px solid";
- var dataURL = canvas.toDataURL();
- document.getElementById("canvasimg").src = dataURL;
- $("#sketch").attr("value", $("#canvasimg").attr("src"));
- // document.getElementById("canvasimg").style.display = "inline";
- }
- function findxy(res, e) {
- if (res == 'down') {
- prevX = currX;
- prevY = currY;
- currX = e.clientX - canvas.offsetLeft;
- currY = e.clientY - canvas.offsetTop;
- flag = true;
- dot_flag = true;
- if (dot_flag) {
- ctx.beginPath();
- ctx.fillStyle = x;
- ctx.fillRect(currX, currY, 2, 2);
- ctx.closePath();
- dot_flag = false;
- }
- }
- if (res == 'up' || res == "out") {
- flag = false;
- }
- if (res == 'move') {
- if (flag) {
- prevX = currX;
- prevY = currY;
- currX = e.clientX - canvas.offsetLeft;
- currY = e.clientY - canvas.offsetTop;
- draw();
- }
- }
- }
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement