如何用js将canvas图像上传到服务器

<form id="form1" runat="server">

<div align="center" class="i-canvas">

<canvas id="myCanvas" width="500" height="300"></canvas>

<ul>

<li><button onclick="javascript:DrawPic()return false">开始画图</button></li>

<li><button onclick="javascript:UploadPic()return false">上传到服务器</button></li>

</ul>

</div>

</form>

<script>

      var Person = function(canvas){

        this.ctx = document.querySelector("canvas").getContext("2d")

        this.canvasWidth = this.ctx.canvas.width

        this.canvasHeight = this.ctx.canvas.height

        this.src = "image/04.png"

        this.init()

      }

      Person.prototype.init = function(){

        var that = this

        this.loadImage(function(image){

          // 获取图片的宽高

          that.imageWidth = image.width

          that.imageHeight = image.height

          // 获取单个小怪兽区域的宽高

          that.positionWidth = that.imageWidth / 4

          that.positionHeight = that.imageHeight / 4

          // 默认是从左上角显示的

          that.x0 = that.canvasWidth / 2 - that.positionWidth / 2

          that.y0 = that.canvasHeight / 2 - that.positionHeight / 2

          // 绘制图片

          that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,

            that.y0, that.positionWidth, that.positionHeight)

        })

      }

      Person.prototype.loadImage = function(callback){

        var image = new Image()

        // 图片加载完成后执行

        image.onload = function(){

          callback &&callback(image)

        }

        image.src = this.src

      }

      var person = new Person()

    </script>

三、绘制小人行走的帧动画

<s<script>

        var Person = function(canvas){

          this.ctx = document.querySelector("canvas").getContext("2d")

          this.canvasWidth = this.ctx.canvas.width

          this.canvasHeight = this.ctx.canvas.height

          this.src = "image/04.png"

          this.init()

        }

        Person.prototype.init = function(){

          var that = this

          this.loadImage(function(image){

            // 获取图片的宽高

            that.imageWidth = image.width

            that.imageHeight = image.height

            // 获取单个小怪兽区域的宽高

            that.positionWidth = that.imageWidth / 4

            that.positionHeight = that.imageHeight / 4

            // 默认是从左上角显示的

            that.x0 = that.canvasWidth / 2 - that.positionWidth / 2

            that.y0 = that.canvasHeight / 2 - that.positionHeight / 2

            // 绘制图片

            that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,

              that.y0, that.positionWidth, that.positionHeight)

            var index = 0

            setInterval(function(){

              that.ctx.clearRect(0, 0, that.canvasWidth, that.canvasHeight)

              index++

              that.ctx.drawImage(image, index * that.positionWidth, 0, that.positionWidth, that.positionHeight, that.x0, that.y0,<br>that.positionWidth, that.positionHeight)

              if(index >= 3){

                index = 0

              }

            }, 100)

          })

        }

        Person.prototype.loadImage = function(callback){

          var image = new Image()

          // 图片加载完成后执行

          image.onload = function(){

            callback &&callback(image)

          }

          image.src = this.src

        }

        var person = new Person()

      </script>

四、绘制疾走的小怪兽

可以通过键盘上下左右键控制小人在画布中任意行走

nction(canvas){

        this.ctx = document.querySelector("canvas").getContext("2d")

        this.canvasWidth = this.ctx.canvas.width

        this.canvasHeight = this.ctx.canvas.height

        this.stepX = 0

        this.stepY = 0

        this.stepSize = 10

        this.index = 0

        this.direction = 0

        this.src = "image/04.png"

        this.init()

      }

      Person.prototype.init = function(){

        var that = this

        this.loadImage(function(image){

          // 获取图片的宽高

          that.imageWidth = image.width

          that.imageHeight = image.height

          // 获取单个小怪兽区域的宽高

          that.positionWidth = that.imageWidth / 4

          that.positionHeight = that.imageHeight / 4

          // 默认是从左上角显示的

          that.x0 = that.canvasWidth / 2 - that.positionWidth / 2

          that.y0 = that.canvasHeight / 2 - that.positionHeight / 2

          // 绘制图片

          that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,

            that.y0, that.positionWidth, that.positionHeight)

          var index = 0

          document.onkeydown = function(e){

            that.ctx.clearRect(0, 0, that.canvasWidth, that.canvasHeight)

            switch(e.keyCode){

              case 37 :

                console.log('左')

                that.direction = 1

                that.stepX--

                that.showImage(image)

                break

              case 38 :

                console.log('上')

                that.direction = 3

                that.stepY--

                that.showImage(image)

                break

              case 39 :

                console.log('右')

                that.direction = 2

                that.stepX++

                that.showImage(image)

                break

              case 40 :

                console.log('下')

                that.direction = 0

                that.stepY++

                that.showImage(image)

                break

            }

          }

        })

      }

      Person.prototype.loadImage = function(callback){

        var image = new Image()

        // 图片加载完成后执行

        image.onload = function(){

          callback &&callback(image)

        }

        image.src = this.src

      }

      Person.prototype.showImage = function(image){

        this.index++

        console.log(this.index)

          this.ctx.drawImage(image, this.index * this.positionWidth, this.direction * this.positionHeight, this.positionWidth, this.positionHeight, this.x0 + this.stepX * this.stepSize, this.y0 + this.stepY * this.stepSize, this.positionWidth, this.positionHeight)

          if(this.index >= 3){

            this.index = 0

          }

      }

      var person = new Person()

    </script>

深圳网站建设www.sz886.com

// canvas工具类

// 画图片 参数：图片地址 x坐标 y坐标 宽 高 回调函数

  // 回调函数：如果传了回调函数会返回图片的dom 第二个参数为next-不执行不会往下走

  // next可穿绘制图片的宽度和高度-不传为默认传的宽度和高度,都不传为默认的图片宽高

可以制作类似微信为头像添加党徽的功能，案例在下方

<!DOCTYPE html>

<html>

<head>

  <title></title>

</head>

<body>

<input id="inputFile" accept="image/*" type="file" />

<input id="inputFile2" accept="image/*" type="file" />

<div>

  <canvas id="mycanvas"></canvas>

</div>

<script src="./utilityClass.js"></script>

<script type="text/javascript">

const color = new ColorProcessing('#46a6ff')

console.log(color)

const canvasHandler = new CanvasHandler('#mycanvas')

const fileHandler = new FileHandler()

inputFile.addEventListener('change', async function () {

  const imgArr = await fileHandler.fileToBase64(this.files)

  canvasHandler.drawImage(imgArr[0], 0, 0, 0, 0, (info, next) =>{

    let width = info.width

    let height = info.height / (width / 200)

    canvasHandler.canvas.width = 200

    canvasHandler.canvas.height = height

    next(200, height)

  })

})

inputFile2.addEventListener('change',async  function () {

  const imgArr = await fileHandler.fileToBase64(this.files)

  canvasHandler.drawImage(imgArr[0], 0, 0, 0, 0, (info, next) =>{

    let height = info.height

    let width = info.width / (height / mycanvas.height)

    next(width, canvasHandler.canvas.height)

  })

})

</script>

</body>

</html>

---