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 相关文章推荐
arguments对象
Nov 20 Javascript
javascript Keycode对照表
Oct 24 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 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
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
简单实现python进度条脚本
2017/12/18 Python
python让列表倒序输出的实例
2018/06/25 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
团员个人的自我评价
2013/12/02 职场文书
村优秀党员事迹材料
2014/01/15 职场文书
工程项目建议书范文
2014/03/12 职场文书
公开服务承诺制度
2014/03/26 职场文书
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers