canvas用生成图片然后下载到本地？

问题描述

问 题

我的需求是：canvas用生成图片然后下载到本地
问题：无法生成图片
代码：
1.生成图片的代码

  CanvasToImg () {
        var canvas = document.getElementById('Anon-crateCard')
        var clientWidth = document.documentElement.clientWidth
        var canvasWidth = Math.floor(clientWidth * 200 / 720)
        canvas.setAttribute('width', canvasWidth * 4 + 'px')
        canvas.setAttribute('height', canvasWidth * 4 + 'px')
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d')
          // drawing code here
        } else {
          // canvas-unsupported code here
        }
        var img = new Image()
        img.onload = function () {
          // 执行drawImage语句
          ctx.drawImage(img, 0, canvasWidth / 10, canvasWidth * 3.6, canvasWidth * 3.6)
          ctx.drawImage(document.images[0], canvasWidth / 2.6, canvasWidth / 2.2, canvasWidth / 1.5, canvasWidth / 1.5)
          ctx.drawImage(document.getElementsByClassName('urlImg')[0].children[0].children[0], canvasWidth * 1.2, canvasWidth * 1.9, canvasWidth * 1.2, canvasWidth * 1.2)
        }
        img.src = 'test.png'
        var image = canvas.toDataURL('image/png')
        window.location.href = image
      }

我绘制canvas后用他的APIcanvas.toDataURL('image/png')的方法生成，然后页面跳转生成了一个白页面，页面结果中的img是这样的

<img style="-webkit-user-select: none; max-width: 3750px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...=">

并没有显示图片这是为什么？

解决方案

代码执行顺序问题。你把最后两句话放在onload函数最后再试试看

这篇关于canvas用生成图片然后下载到本地？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！