如何将Canvas 上的内容转换为一张Bitmap-Android开发问答

Posted 2023-05-05

如果是要将一个Bitmap绘制到界面上，那就直接用Canvas#drawBitmap()方法绘制即可

如果是要从一个已有的canvas获取bitmap对象，可尝试下面的办法：
1、用Bitmap.createBitmap()方法，创建一个与目标canvas大小相同的空白Bitmap对象
2、用Canvas#setBitmap()方法，将创建的bitmap设置为Canvas对象的Bitmap。之后所有对目标canvas的绘制操作都会绘制在这个bitmap上，相当于将canvas中的内容转换为了一个单独的bitmap

另外，如果创建canvas对象的时候调用的是canvas(Bitmap bitmap)方法的话，那么创建canvas的时候就应该已经有现存的bitmap对象了，这种情况应该不需要转换 参考技术A Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
然后在canvas上面进行绘制就行了 绘制的东西就会显示到bitmap上本回答被提问者和网友采纳 参考技术B 上面的API就是设置你要画图时保存图的BITMAP，你画的东西就在BITMAP中。这个bitmap可以通过Bitmap.createBitmap(width, height, config)来新建，而不是你从资源里加载的。
先setDrawingCacheEnabled(true);
你要显示的都显示出来后buildDrawingCache();
最后Bitmap b=getDrawingCache();

使用Vue将两张图片叠加再保存为一张图片下载

最终效果

• 将一张课程图片和一张二维码图片叠加（网上图片随便乱找，勿对号入座！！！）
  

步骤

• 先将两张图片使用css进行叠加，然后按照自己需求将图片移动到合理位置
• 要使用到一个插件将两张图片转为canvas，插件链接：html2canvas
• 最后将canvas保存下载。

代码

<template>
  <div>
    <button type="button" @click="save()">保存</button>
    <a id="link"></a>
    <div class="course-container" id="myImage"> 
      <div class="course">
          <img src="@/assets/course.jpeg"/>
      </div>
      <div class="code">
          <img src="@/assets/code.jpg"/>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
  export default 
    data() 
      return 
      
    ,
    created() 
        
    ,
    destroyed() 
     
    ,
    methods: 
      save() 
        html2canvas(document.querySelector("#myImage")).then(canvas => 
          var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you dont replace you will get a DOM 18 exception.

        //save as download without name and extension
        //window.location.href = image; 
        var link = document.getElementById('link');
        link.setAttribute('download', 'my.png');
        link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
        link.click();
        );
      
    
  
</script>

<style scoped>
.course-container 
  height: 1024px;
  width: 724px;

 .course 
     z-index: 1;
     position: absolute;
 
 .code 
    z-index: 2;
    position: absolute;
    margin-top: 700px;
    margin-left: 400px;
    width: 150px;
    height: 150px;
 
</style>