Html 爱奥尼亚3-画布绘制-如何保存和加载？

我已经创建了一个应用程序，允许用户画任何东西

这些是绘制画布的主要功能

ngAfterViewInit(){

    this.canvasElement = this.canvas.nativeElement;

    this.renderer.setElementAttribute(this.canvasElement, 'width', this.platform.width() + '');
    this.renderer.setElementAttribute(this.canvasElement, 'height', this.platform.height() + '');

}

handleStart(ev){
    this.lastX = ev.touches[0].pageX;
    this.lastY = ev.touches[0].pageY;
}

handleMove(ev){

    let ctx = this.canvasElement.getContext('2d');
    let currentX = ev.touches[0].pageX;
    let currentY = ev.touches[0].pageY;

    ctx.beginPath();
    ctx.lineJoin = "round";
    ctx.moveTo(this.lastX, this.lastY);
    ctx.lineTo(currentX, currentY);
    ctx.closePath();
    ctx.strokeStyle = this.currentColour;
    ctx.lineWidth = this.brushSize;
    ctx.stroke();

    this.lastX = currentX;
    this.lastY = currentY;

}

我需要添加保存和加载功能

我需要做的只是将画布值存储在变量中，以便能够加载它

---

我工作了几个小时后得到了答案

为了节省时间，我用这种方法

saveCanvas(){
  this.saved = this.canvasElement.toDataURL();
}

loadCanvas(){
  this.clearCanvas();
  var canvas = this.canvasElement;
    var context = canvas.getContext('2d');

    // load image from data url
    var imageObj = new Image();
    imageObj.onload = function() {
      context.drawImage(this, 0, 0);
    };

    imageObj.src = this.saved;
    // make ajax call to get image data url
 var request = new XMLHttpRequest();
 request.open('GET', 'https://www.html5canvastutorials.com/demos/assets/dataURL.txt', true);
 request.onreadystatechange = function() {
   // Makes sure the document is ready to parse.
   if(request.readyState == 4) {
     // Makes sure it's found the file.
     if(request.status == 200) {
       loadCanvas(request.responseText);
     }
   }
 };
 request.send(null);

}

对于负载，我用这种方式

saveCanvas(){
  this.saved = this.canvasElement.toDataURL();
}

loadCanvas(){
  this.clearCanvas();
  var canvas = this.canvasElement;
    var context = canvas.getContext('2d');

    // load image from data url
    var imageObj = new Image();
    imageObj.onload = function() {
      context.drawImage(this, 0, 0);
    };

    imageObj.src = this.saved;
    // make ajax call to get image data url
 var request = new XMLHttpRequest();
 request.open('GET', 'https://www.html5canvastutorials.com/demos/assets/dataURL.txt', true);
 request.onreadystatechange = function() {
   // Makes sure the document is ready to parse.
   if(request.readyState == 4) {
     // Makes sure it's found the file.
     if(request.status == 200) {
       loadCanvas(request.responseText);
     }
   }
 };
 request.send(null);

}