Html Clear canvas drawpad jquery_Html_Jquery

Html Clear canvas drawpad jquery

html jquery

Html Clear canvas drawpad jquery,html,jquery,Html,Jquery,我正在使用Jquery的画板（画笔工具）插件以不同的颜色画图，并将画布中的图像作为背景。我的目的是有一个按钮来清除画布上的图形。我尝试这样做的方式是将背景图像与图形一起删除。如何在单击“清除”按钮时保留背景并删除图形我的小提琴： $（文档）.ready（函数（）{ //背景 var urlBackground=https://picsum.photos/id/100/500/400'; var imageBackground=新图像（）； imageBackground.src=urlBac

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

我的小提琴：


$（文档）.ready（函数（）{
//背景
var urlBackground=https://picsum.photos/id/100/500/400';
var imageBackground=新图像（）；
imageBackground.src=urlBackground；
setAttribute（'crossorigin'，'anonymous'）；
$（“#目标”）.drawpad（）；
var contextCanvas=$（“#目标画布”）.get（0）.getContext（'2d'）；
imageBackground.onload=函数（）{
drawImage（imageBackground，0,0）；
}
//只需要清除图形而不需要清除背景图像
$（“#clearDrawing”）。单击（函数（）{
clearRect（0,0750423）；
});
});
文件
正文{背景色：rgb（248，255，227）}
#目标{
宽度：500px；
高度：400px；
}
清晰的绘图

这个答案是我上一次在

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

这里有一些可能的方法：

@sinisake在评论中建议重新加载背景，这样我们就有了只保留背景完整的新画布（但出于某种原因，白色涂鸦让背景消失了）
该库必须具有“删除”或“擦除”涂鸦功能（它没有）
当用户单击“保存”时保存图形的每个更改，以便用户可以“撤消”到图形的早期版本（如git的
```
git commit
```
和
```
git reset
```
命令），我将在回答中使用这种方法

理想情况下，您应该使用服务器端语言和持久性存储（例如：数据库）来存储用户的涂鸦历史。但在本例中，为了模拟这种情况，我将使用javascript的localStorage API

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

小提琴：

这里是stack fiddle（由于浏览器不允许stack fiddle使用本地存储而修改）

//本地存储API的polyfill
var localStorage1={
项目：{}，
removeItem：功能（键）{
window.localStorage1.items[key]=null；
},
getItem:函数（键）{
返回window.localStorage1.items[key]；
},
设置项：功能（键，值）{
return window.localStorage1.items[key]=val；
},
}
//window.localStorage=localStorage1；
window.localStorage1=localStorage1；
$（文档）.ready（函数（）{
$（“#保存”）。单击（函数（）{
//我已经在中解释了“保存逻辑”https://stackoverflow.com/a/67155647/3706717
//控制台日志（“保存”）；
var base64Image=$（“#目标画布”）.get（0）.toDataURL（）；
//console.log（base64Image）；
$（“#outputBase64FormInput”）.val（base64Image）；
$（“#outputBase64”）.html（base64Image）；
//加载/读取保存的状态/历史记录
var savedImageJson=window.localStorage1.getItem（“savedImage”）；
//log（savedImageJson）；
//如果历史记录未定义，请创建空数组
如果（savedImageJson==null | | savedImageJson的类型==“未定义”）savedImageJson=“[]”；
//解析历史
var savedImageArr=JSON.parse（savedImageJson）；
//将当前状态作为新项添加到历史记录中
savedImageArr.push（base64Image）；
//保存修改的（添加的历史记录）
setItem（“savedImage”，JSON.stringify（savedImageArr））；
$（“#numosavedhistory”）.html（savedImageArr.length）；
});
//“清除”按钮只是清除本地存储（或用于持久存储的任何类型的API）
$（“#清除”）。单击（函数（）{
//控制台日志（“保存”）；
window.localStorage1.removietem（“savedImage”）；
$（“#numosavedhistory”）.html（0）；
});
//撤消上次更改（单击保存时回滚到上次状态）
$（“#撤消”）。单击（函数（）{
//清除画布（防止同时清除背景的白墨水错误）
canvas.width=canvas.width；
//控制台日志（“撤销”）；
//加载/读取保存的状态/历史记录
var savedImageJson=window.localStorage1.getItem（“savedImage”）；
//log（savedImageJson）；
//如果历史记录未定义，请创建空数组
如果（savedImageJson==null | | savedImageJson的类型==“未定义”）savedImageJson=“[]”；
//解析历史
var savedImageArr=JSON.parse（savedImageJson）；
//删除历史记录中的最后一项
savedImageArr.pop（）；
//保存修改的（弹出的历史记录）
setItem（“savedImage”，JSON.stringify（savedImageArr））；
//在画布上画旧画
var imageOld=新图像（）；
imageOld.src=savedImageArr[savedImageArr.length-1]；
imageOld.onload=函数（）{
drawImage（imageOld，0,0）；
};
$（“#numosavedhistory”）.html（savedImageArr.length）；
});
//背景
var urlBackground=https://picsum.photos/id/100/500/400';
var imageBackground=新图像（）；
imageBackground.src=urlBackground；
//imageBackground.crossorigin=“匿名”；
setAttribute（'crossorigin'，'anonymous'）；
$（“#目标”）.drawpad（）；
var画布=$（“#目标画布”）.get（0）；
var contextCanvas=canvas.getContext（'2d'）；
imageBackground.onload=函数（）{
drawImage（imageBackground，0,0）；
$（“#清除”）.trigger（“click”）；//刷新页面时清除以前的图形
$（“#保存”）.trigger（“单击”）；//保存第一幅图像（仅背景）
}
})；

body{背景色：rgb（248255227）}
#目标{
宽度：500px；
身高：40
    <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>