如何把本地图片上传到canvas里，编辑后并保存下来

你可以使用HTML5中的Canvas API来实现将本地图片上传到canvas中进行编辑。具体步骤如下：

1.创建一个HTML5的Canvas元素。

2.创建一个FileReader对象，用来读取本地的图片文件。

3.在FileReader对象的onload事件中，将读取的图片文件转换为图片对象。

4.使用Canvas API将图片绘制到Canvas元素上。

5.进行编辑处理，比如绘制图形、添加文字等。

6.将编辑后的图片导出为PNG或JPEG格式，并保存到本地。

以下是示例代码，您可以根据具体需求进行修改：

// HTML代码
<canvas id="canvas"></canvas>
<input type="file" id="fileInput">

// JavaScript代码
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function(e) {
  var file = fileInput.files[0];

  if (file.type.match(/image.*/)) {
    var reader = new FileReader();

    reader.onload = function(e2) {
      var img = new Image();
      img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);

        // 在Canvas中绘制图形
        ctx.beginPath();
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(50, 50, 100, 100);
        ctx.closePath();

        // 在Canvas中添加文字
        ctx.font = '32px Arial';
        ctx.fillStyle = '#000000';
        ctx.fillText('Hello', 200, 100);

        // 将Canvas导出为PNG格式图片
        var png = canvas.toDataURL('image/png');

        // 将图片保存到本地
        var downloadLink = document.createElement('a');
        downloadLink.href = png;
        downloadLink.download = 'edited-image.png';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
      };

      img.src = e2.target.result;
    };

    reader.readAsDataURL(file);
  }
});