js+canvas实现两张图片合并成一张图片的方法


Posted in Javascript onNovember 01, 2019

本文实例讲述了js+canvas实现两张图片合并成一张图片的方法。分享给大家供大家参考,具体如下:

JS和canvas的合成方式

function drawAndShareImage(){
  var canvas = document.createElement("canvas");
  canvas.width = 700;
  canvas.height = 700;
  var context = canvas.getContext("2d");
  context.rect(0 , 0 , canvas.width , canvas.height);
  context.fillStyle = "#fff";
  context.fill();
  var myImage = new Image();
  myImage.src = "./2.png";  //背景图片 你自己本地的图片或者在线图片
  myImage.crossOrigin = 'Anonymous';
  myImage.onload = function(){
    context.drawImage(myImage , 0 , 0 , 700 , 700);
    context.font = "60px Courier New";
    context.fillText("我是文字",350,450);
    var myImage2 = new Image();
    myImage2.src = "./1.png";  //你自己本地的图片或者在线图片
    myImage2.crossOrigin = 'Anonymous';
    myImage2.onload = function(){
      context.drawImage(myImage2 , 175 , 175 , 225 , 225);
      var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
      var img = document.getElementById('avatar');
      // document.getElementById('avatar').src = base64;
      img.setAttribute('src' , base64);
    }
  }
}

PS:在线图片和本地图片都要注意下跨越的问题,最好放在服务器上测试。

java的实现方式

public static String generateCode(String codeUrl, Integer userId, String userName) {
 Font font = new Font("微软雅黑", Font.PLAIN, 30);// 添加字体的属性设置
 String projectUrl = PathKit.getWebRootPath() + "/before/codeImg/";
 String imgName = projectUrl + userId + ".png";
 try {
 // 加载本地图片
 String imageLocalUrl = projectUrl + "weixincode2.png";
 BufferedImage imageLocal = ImageIO.read(new File(imageLocalUrl));
 // 加载用户的二维码
 BufferedImage imageCode = ImageIO.read(new URL(codeUrl));
 // 以本地图片为模板
 Graphics2D g = imageLocal.createGraphics();
 // 在模板上添加用户二维码(地址,左边距,上边距,图片宽度,图片高度,未知)
 g.drawImage(imageCode, 575, imageLocal.getHeight() - 500, 350, 350, null);
 // 设置文本样式
 g.setFont(font);
 g.setColor(Color.BLACK);
 // 截取用户名称的最后一个字符
 String lastChar = userName.substring(userName.length() - 1);
 // 拼接新的用户名称
 String newUserName = userName.substring(0, 1) + "**" + lastChar + " 的邀请二维码";
 // 添加用户名称
 g.drawString(newUserName, 620, imageLocal.getHeight() - 530);
 // 完成模板修改
 g.dispose();
 // 获取新文件的地址
 File outputfile = new File(imgName);
 // 生成新的合成过的用户二维码并写入新图片
 ImageIO.write(imageLocal, "png", outputfile);
 } catch (Exception e) {
 e.printStackTrace();
 }
 // 返回给页面的图片地址(因为绝对路径无法访问)
 imgName = Constants.PROJECT_URL + "codeImg/" + userId + ".png";
 return imgName;
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
浏览器常用高宽的jquery插件
Feb 24 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
javascript实现2048游戏示例
May 04 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
vue中data里面的数据相互使用方式
Jun 05 Vue.js
JS中自定义事件的使用与触发操作实例分析
Nov 01 #Javascript
vue设置动态请求地址的例子
Nov 01 #Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 #Javascript
js实现旋转的星空效果
Nov 01 #Javascript
浅谈小程序globalData的那些事儿
Nov 01 #Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 #Javascript
vue实现配置全局访问路径头(axios)
Nov 01 #Javascript
You might like
关于Intype一些小问题的解决办法
2008/03/28 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
Python基类函数的重载与调用实例分析
2015/01/12 Python
Python实现统计单词出现的个数
2015/05/28 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
django 类视图的使用方法详解
2019/07/24 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Django配置跨域并开发测试接口
2020/11/04 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
英语专业学生的自我评价
2013/12/30 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
文明工地标语
2014/06/16 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
行政处罚决定书
2015/06/24 职场文书
商务宴会祝酒词
2015/08/11 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
Python Django搭建文件下载服务器的实现
2021/05/10 Python
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android