图片在canvas中显示，给canvas添加文字，文字描边，将canvas保存成图片下载到本地_html

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      图片在canvas中显示，给canvas添加文字，文字描边，将canvas保存成图片下载到本地
    </title>
  </head>
  <body>
    <div>
      <canvas id="canvas" width="1280" height="720"></canvas>
    </div>
    <script>
      // base64转Blob对象
      const base64ToBlob = (code) => {
        let parts = code.split(';base64,')
        let contentType = parts[0].split(':')[1]
        let raw = window.atob(parts[1])
        let rawLength = raw.length
        let uint8Array = new Uint8Array(rawLength)
        for (let i = 0; i < rawLength; i++) {
          uint8Array[i] = raw.charCodeAt(i)
        }
        return new Blob([uint8Array], { type: contentType })
      }

      const download = (dataUrl, fileName) => {
        let aLink = document.createElement('a')
        let blob = base64ToBlob(dataUrl)
        let event = document.createEvent('HTMLEvents')
        event.initEvent('click', true, true)
        aLink.download = fileName + '.' + blob.type.split('/')[1]
        aLink.href = URL.createObjectURL(blob)
        aLink.click()
      }
      const init = () => {
        let canvas = document.getElementById('canvas')
        let ctx = canvas.getContext('2d')
        let image = new Image()
        image.crossOrigin = 'anonymous'
        //image.src = './1280.png'
        image.src =
          'http://localhost:85/video/grade1/chinese1-img/%E6%88%AA%E5%9B%BE%20(1).png?time=1662633780355'
        image.onload = function () {
          ctx.drawImage(image, 1, 1)
          ctx.lineWidth = 5
          ctx.font = '40px Verdana'
          let title = '10【汉语拼音】第7课、第8课：z c s 和zh ch sh r'
          let tempTitleArr = []
          for (let i = 0; i < title.length; i = i + 16) {
            let tempTitle = title.slice(i, i + 16)
            tempTitleArr.push(tempTitle)
          }
          if (
            tempTitleArr.length > 2 &&
            tempTitleArr[tempTitleArr.length - 1].length < 8
          ) {
            tempTitleArr[tempTitleArr.length - 2] =
              tempTitleArr[tempTitleArr.length - 2] +
              tempTitleArr[tempTitleArr.length - 1]
            tempTitleArr.splice(tempTitleArr.length - 1, 1)
          }
          console.log(tempTitleArr)
          tempTitleArr.forEach((item, index) => {
            ctx.strokeStyle = '#ff3333'
            ctx.strokeText(item, 10, 100 * (index + 1))
            ctx.fillStyle = '#ffff00'
            ctx.fillText(item, 10, 100 * (index + 1))
          })
          const dataUrl = canvas.toDataURL('image/png')
          console.log(dataUrl)
          download(dataUrl, '截图')
        }
      }
      init()
    </script>
  </body>
</html>