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 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 Javascript
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
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
JavaScript 高级语法介绍
2009/06/15 Javascript
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
会计专业推荐信
2013/10/29 职场文书
宿舍打麻将检讨书
2014/01/24 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
学生党员检讨书范文
2014/12/27 职场文书
建国大业观后感800字
2015/06/01 职场文书
JS中如何优雅的使用async await详解
2021/10/05 Javascript