zoukankan      html  css  js  c++  java
  • 微信小程序 base64图片在canvas上画图

    上代码

    wxml

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

    js

    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 }) } }) } })

    注意:base字符串没有头信息

  • 相关阅读:
    IDEA2019破解版安装
    Docker (一)安装与基本命令
    js导出PDF
    python入门笔记一安装
    微信内关闭当前页面
    微信一些网页
    内网穿透工具:钉钉HTTP内网穿透使用详解
    html生成二维码,qr
    IDEA无法正常启动(打不开&报错)
    微信测试号
  • 原文地址:https://www.cnblogs.com/lmyt/p/10621922.html
Copyright © 2011-2022 走看看