html - 清除画布画板jquery

问题描述

我正在使用 Jquery 的绘图板（钢笔工具）插件以不同的颜色进行绘制，并在画布中使用图像作为背景。我的目的是有一个按钮来清除画布上的绘图。我尝试这样做的方式是删除背景图像以及绘图。如何在单击清除按钮时保留背景并删除绘图？

    <script>
    $(document).ready(function() {

    // set background
    var urlBackground = 'https://picsum.photos/id/100/500/400';
    var imageBackground = new Image();
    imageBackground.src = urlBackground;
    imageBackground.setAttribute('crossorigin', 'anonymous');

    $("#target").drawpad();

    var contextCanvas = $("#target canvas").get(0).getContext('2d');

    imageBackground.onload = function(){
    contextCanvas.drawImage(imageBackground, 0, 0);
    }

    // Need to clear only the drawing not the background image
    $("#clearDrawing").click(function() {
     contextCanvas.clearRect(0, 0, 750, 423);
    });

    

    });
    </script>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cnbilgin.github.io/jquery-drawpad/jquery-drawpad.css" />
    <style>
    body {background-color:rgb(248, 255, 227)}
    #target {
    width:500px;
    height:400px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cnbilgin.github.io/jquery-drawpad/jquery-drawpad.js"></script>
    </head>
    <body>
    <button id="clearDrawing">Clear Drawing</button>
    <div id="target" class="drawpad-dashed"></div>
    

    </body>
    </html>

标签： htmljquery

这个答案是我之前在https://stackoverflow.com/a/67155647/3706717上的答案的即兴创作

所以我们有了新的要求：删除/清除以前的图纸

这里有一些可能的方法：

@sinisake 在评论中建议重新加载背景，以便我们拥有只有背景完好无损的新鲜画布（但由于某种原因，白色涂鸦使背景消失了）
图书馆必须具有“删除”或“擦除”涂鸦功能（它没有）
当用户单击“保存”时保存绘图的每个更改，以便用户可以“撤消”到绘图的先前版本（如 gitgit commit和git reset命令），我将在我的回答中使用这种方法

理想情况下，您应该使用服务器端语言和持久存储（例如：数据库）来存储用户的涂鸦历史。但在这种情况下，为了模拟这样的事情，我将使用 javascript 的 localStorage API https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

所以每次我调用 localStorage API 时，假设我正在调用一些 ajax 到某个端点。

小提琴：https ://jsfiddle.net/0da572jy/3/

这是堆栈小提琴（已修改，因为浏览器不允许堆栈小提琴使用 localStorage）

// polyfill for localStorage API
var localStorage1 = {
  items: {},
  removeItem: function(key) {
    window.localStorage1.items[key] = null;
  },
  getItem: function(key) {
    return window.localStorage1.items[key];
  },
  setItem: function(key, val) {
    return window.localStorage1.items[key] = val;
  },
}
//window.localStorage = localStorage1;
window.localStorage1 = localStorage1;



$(document).ready(function() {
  
  
  $("#save").click(function() {
  
    // I already explained the #save logic in https://stackoverflow.com/a/67155647/3706717
    //console.log("save");
    var base64Image = $("#target canvas").get(0).toDataURL();
    //console.log(base64Image);
    $("#outputBase64FormInput").val(base64Image);
    $("#outputBase64").html(base64Image);
    
    // load/read saved states/histories
    var savedImageJson = window.localStorage1.getItem("savedImage");
    //console.log(savedImageJson);
    
    // if the history is undefined, create empty array
    if(savedImageJson == null || typeof savedImageJson == "undefined") savedImageJson = "[]";
    
    // parse the history
    var savedImageArr = JSON.parse(savedImageJson);
    
    // add current state as a new item to history
    savedImageArr.push(base64Image);
    
    // save the modified (added history)
    window.localStorage1.setItem("savedImage", JSON.stringify(savedImageArr));
    
    $("#numOfSavedHistory").html( savedImageArr.length );
  });
  
  // clear button just clears the localStorage (or any kind of API you use for persistent storage
  $("#clear").click(function() {
    //console.log("save");
      window.localStorage1.removeItem("savedImage");
    $("#numOfSavedHistory").html( 0 );
  });
  
  
  // undo last change (rollback to last state when you clicked save)
  $("#undo").click(function() {
    // clear canvas (to prevent white ink bug that also clears the background)
    canvas.width = canvas.width;
    
    //console.log("undo");
    
    // load/read saved states/histories
    var savedImageJson = window.localStorage1.getItem("savedImage");
    //console.log(savedImageJson);
    
    // if the history is undefined, create empty array
    if(savedImageJson == null || typeof savedImageJson == "undefined") savedImageJson = "[]";
    
    // parse the history
    var savedImageArr = JSON.parse(savedImageJson);
    
    // delete last item in history
    savedImageArr.pop();
    
    // save the modified (pop'ed history)
    window.localStorage1.setItem("savedImage", JSON.stringify(savedImageArr));
    
    // draw old picture on canvas
    var imageOld = new Image();
    imageOld.src = savedImageArr[savedImageArr.length-1];
    imageOld.onload = function() {
      contextCanvas.drawImage(imageOld, 0, 0);
    };
    
    $("#numOfSavedHistory").html( savedImageArr.length );
  });
  
  

  // set background
  var urlBackground = 'https://picsum.photos/id/100/500/400';
  var imageBackground = new Image();
  imageBackground.src = urlBackground;
  //imageBackground.crossorigin = "anonymous";
  imageBackground.setAttribute('crossorigin', 'anonymous');
  $("#target").drawpad();
  var canvas = $("#target canvas").get(0);
  var contextCanvas = canvas.getContext('2d');
  imageBackground.onload = function(){
    contextCanvas.drawImage(imageBackground, 0, 0);
    $("#clear").trigger("click"); // clear previous drawings when page refreshed
    $("#save").trigger("click"); // save the first image (background only)
  }
  
});

body {background-color:rgb(248, 255, 227)}
        #target {
        width:500px;
        height:400px;
        }

<!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="https://cnbilgin.github.io/jquery-drawpad/jquery-drawpad.css" />
    
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cnbilgin.github.io/jquery-drawpad/jquery-drawpad.js"></script>
        </head>
        <body>
        <button id="undo">Undo</button>
        <button id="save">Save</button>
        <button id="clear">Clear Saved Picture</button>
    <span id="numOfSavedHistory">0</span>
        <div id="target" class="drawpad-dashed"></div>
        <div id="outputBase64"></div>

        </body>
        </html>

html - 清除画布画板jquery

问题描述

解决方案

推荐阅读