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 相关文章推荐
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 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
一个用于网络的工具函数库
2006/10/09 PHP
PHP安全性漫谈
2012/06/28 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
php微信公众号开发之简答题
2018/10/20 PHP
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
用JS实现选项卡
2020/03/23 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Python常用模块介绍
2014/11/21 Python
python中global用法实例分析
2015/04/30 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
详解Django admin高级用法
2019/11/06 Python
python操作gitlab API过程解析
2019/12/27 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
软件测试工程师面试问题精选
2016/10/28 面试题
投标单位介绍信
2014/01/09 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
美术国培研修感言
2014/02/12 职场文书
西式婚礼主持词
2014/03/13 职场文书
小学语文课后反思精选
2014/04/25 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle
Java异常体系非正常停止和分类
2022/06/14 Java/Android
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android