微信小程序base64图片在canvas上画图

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

上代码

wxml

<canvas canvas-id="myCanvas" style="width:400px;height:400px;"></canvas>

const ctx = wx.createCanvasContext('myCanvas'), //canvas
      fsm = wx.getFileSystemManager(),  //文件管理器
      FILE_BASE_NAME = 'tmp_base64src', //文件名
      format = 'png', //文件后缀
      base64Str = ('iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpiZDM3ZmYwZi0wZDgxLWRkNDMtYTBjOC05YzU1OWVmMmUyNmYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjJGNUNCMDIwMjc2MTFFOUIxNDFENzI5QTVGOTQ3NTAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjJGNUNCMDEwMjc2MTFFOUIxNDFENzI5QTVGOTQ3NTAiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MWJhYjRjZjYtNGZiZC05OTRhLWEwZDgtNDYzYjFlMjE4ZjFiIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmJkMzdmZjBmLTBkODEtZGQ0My1hMGM4LTljNTU5ZWYyZTI2ZiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PosmEdAAAANoSURBVHja7Fg9aBRBFH7vTlEhUTSNiY2SQhRTGRIjKsnhD5qkFbSxsAnYiEUghaRQU5g0FiIWiqIgSWWTEMT4F7UQJGptLTYWwYBCbnb8dnfmbnZ2Ntm73cQUtzD53szevvfd99682QtLKWkjXwXa4FeDYIPg/7425elsros6ikTFgqQv/jcHBgpom1d49vDnNVRw+gjxbDeNeUzfBNECcMwDHyD5Tcwf2l53BZ/3UKHIdBfxhwIGMFjSCHAn8AqIeaSUlByy5fUiOHWUNoPcIwS9GCyE5IhDIkPAHcBLWF/W8umU8VoTfHqMtoHcJAIPBsQoJEdKJYUXgM3A88A/er1Qg4p11eDD49SMWpsRTIN+baHeCHYwPFVvBg5gzIDTdqlrUt1fE4L3TlALiLzC6BU+MU3OtjXJkGgvcA6jRa+lJVkTwTu91IbA70CgUyiFIoRsBSmiaidwHthmkpR5EbzdR+0g8h4BDwqLmLDSLBwpV1/oAOYfgO1p208qgjdKdAjB5jH2RVLJDtuuQY6t7ZWhkh0eVWuyboLXT1IXgr9FkNYyJ6tkptmuSy++eVqBb4DdOt11ERw+RSUEmEOwXTG1VptbdSkMJRXuwvpLYKkuglfPUD+cTmM0udLomntJxNztxx9N0m9BTP01N2oEegw/W4WqD92EK+WiTwx9KhjzynGmmzbFGnjlPvxugfUAY3dNCoLYTyNV46upZ9dcivYzbqz9qjnFeMhP8SjGwMQLGnbVWjlFLa7QfoZBbgBro8BzSTw47a+6a6dJFmVYEwFKhWTYPhrziG08WwyRC1WbSp8yviwk1aKa/8Dfj0HPDWvRv92De3sEVT8vZLwu2azdTAQpdCSsTaA2yOWR1zQ70RchfRb3ZsixgZxvP5SDghWH8Z27pL+EQfo3O9TTxATHu0Emgp6lnp1y/ypzhvaTR4opqlDU1ipr0mQQNebCkeZ8atAIlpQeQdF5woZy+sme4gQFhHTUqfosuzdUTPm8FBRwWDTrhq1fPyJJLftolCRi7ScHBb/D234y6kZYgQXF1WIHafZ9pdjBNb1RQ51Jz3HOKvsvxY+0pRXO6yn77SczQZC7BYf34XDReCEtY+0Z7AWi2Ln7FfgEY7lcJbIofB9MN23Smc/ixn+3GgQbBDfo9U+AAQAR3QEE8abLPQAAAABJRU5ErkJggg==') //base64字符串
    buffer = wx.base64ToArrayBuffer(base64Str), //base 转二进制
    filePath = `${wx.env.USER_DATA_PATH}/www.${format}`; //文件名

    fsm.writeFile({ //写文件
      filePath,
      data: buffer,
      encoding: 'binary',
      success(res) {

        wx.getImageInfo({ //读取图片
          src: filePath,
          success: function(res) {
            console.log({
              res
            })

            ctx.drawImage(res.path, 0, 0, 150, 100) //画图
            ctx.draw()
          },
          error(res) {
            console.log({
              res
            })
          }
        })
      }
    })