canvas 合成图片

最新推荐文章于 2024-07-15 16:32:01 发布

没有可以使用的ID

最新推荐文章于 2024-07-15 16:32:01 发布

阅读量489

点赞数

分类专栏： HTML JavaScript

本文链接：https://blog.csdn.net/baidu1023737029/article/details/81066439

版权

HTML 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

/**创建canvas**/

 
  var canvas = document.createElement("canvas"); 
 
  //设置宽高
 
  canvas.width = 750; 
 
  canvas.height = 1000; 
 
  var ctx = canvas.getContext("2d"); 
 
  //包含的图片

 
 var 
 bacImg = 
 new 
 Image(); 

 
 bacImg. 
 src = 
 //图片地址; 

 
   bacImg. 
   onload = 
   function () { 
  
                    //将图片放到canvas，this代表当前图片的对象，剩余参数为X,Y,图片宽度，图片高度 
   
   ctx. 
   drawImage( 
   this, 
   25, 
   50, 
   700, 
   950); 
  
                    // 
   若有多个图片，可以在onload里面再重复以上代码 
   
                    //所需文字 
   
     ctx. 
     fillStyle = 
     "#FFF"; 
    
     ctx. 
     font = 
     "35px 宋体 bolder"; 
    
     ctx. 
     textAlign = 
     "center"; 
    
     ctx. 
     fillText( 
     '文字内容', 
     375, 
     105); 
    
                      //生成图片地址base64 
    
                      var 
      dataUrl = 
      canvas. 
      toDataURL( 
      "image/png"); 
     
}