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

最新推荐文章于 2023-12-28 17:18:19 发布

tom_wong666

最新推荐文章于 2023-12-28 17:18:19 发布

阅读量1k

点赞数 1

分类专栏：问题探讨文章标签： js canvas base64

本文链接：https://blog.csdn.net/tom_wong666/article/details/97526197

版权

问题探讨专栏收录该内容

25 篇文章 1 订阅

订阅专栏

需求

将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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

tom_wong666

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
[问题探讨]使用toDataURL()方法将canvas转化为base64格式的png图片

<body> <canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas> <script> var drawing = document.getElementByI...
复制链接

扫一扫