[问题探讨]使用toDataURL()方法将canvas转化为base64格式的png图片_uniapp canvas.todataurl

作者：笔触狂放9 | 2024-03-06 10:18:23

踩

uniapp canvas.todataurl

需求

将canvas转化为base64格式的png图片

实现

<body>
  <canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>
  <script>
      var drawing = document.getElementById("drawing"); 
      //确定浏览器支持<canvas>元素
      if (drawing.getContext){
          // 获取画布
          var context = drawing.getContext("2d"); 
          // 画一个红色矩形
          context.fillStyle="#FF0000";
          context.fillRect(0,0,150,150);
          //取得图像的数据 URI 
          var imgURI = drawing.toDataURL("image/png"); 
          // 创建img元素
          var image = document.createElement("img"); 
          // 设置img元素的src
          image.src = imgURI; 
          // 将img元素挂在到dom中
          document.body.appendChild(image);                    
      }                
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/197870