js+canvas实现两张图片合并成一张图片的方法
本文实例讲述了js+canvas实现两张图片合并成一张图片的方法。分享给大家供大家参考，具体如下：
JS和canvas的合成方式
functiondrawAndShareImage(){
varcanvas=document.createElement("canvas");
canvas.width=700;
canvas.height=700;
varcontext=canvas.getContext("2d");
context.rect(0,0,canvas.width,canvas.height);
context.fillStyle="#fff";
context.fill();
varmyImage=newImage();
myImage.src="./2.png";//背景图片你自己本地的图片或者在线图片
myImage.crossOrigin='Anonymous';
myImage.onload=function(){
context.drawImage(myImage,0,0,700,700);
context.font="60pxCourierNew";
context.fillText("我是文字",350,450);
varmyImage2=newImage();
myImage2.src="./1.png";//你自己本地的图片或者在线图片
myImage2.crossOrigin='Anonymous';
myImage2.onload=function(){
context.drawImage(myImage2,175,175,225,225);
varbase64=canvas.toDataURL("image/png");//"image/png"这里注意一下
varimg=document.getElementById('avatar');
//document.getElementById('avatar').src=base64;
img.setAttribute('src',base64);
}
}
}
PS：在线图片和本地图片都要注意下跨越的问题，最好放在服务器上测试。
java的实现方式
publicstaticStringgenerateCode(StringcodeUrl,IntegeruserId,StringuserName){
Fontfont=newFont("微软雅黑",Font.PLAIN,30);//添加字体的属性设置
StringprojectUrl=PathKit.getWebRootPath()+"/before/codeImg/";
StringimgName=projectUrl+userId+".png";
try{
//加载本地图片
StringimageLocalUrl=projectUrl+"weixincode2.png";
BufferedImageimageLocal=ImageIO.read(newFile(imageLocalUrl));
//加载用户的二维码
BufferedImageimageCode=ImageIO.read(newURL(codeUrl));
//以本地图片为模板
Graphics2Dg=imageLocal.createGraphics();
//在模板上添加用户二维码(地址,左边距,上边距,图片宽度,图片高度,未知)
g.drawImage(imageCode,575,imageLocal.getHeight()-500,350,350,null);
//设置文本样式
g.setFont(font);
g.setColor(Color.BLACK);
//截取用户名称的最后一个字符
StringlastChar=userName.substring(userName.length()-1);
//拼接新的用户名称
StringnewUserName=userName.substring(0,1)+"**"+lastChar+"的邀请二维码";
//添加用户名称
g.drawString(newUserName,620,imageLocal.getHeight()-530);
//完成模板修改
g.dispose();
//获取新文件的地址
Fileoutputfile=newFile(imgName);
//生成新的合成过的用户二维码并写入新图片
ImageIO.write(imageLocal,"png",outputfile);
}catch(Exceptione){
e.printStackTrace();
}
//返回给页面的图片地址(因为绝对路径无法访问)
imgName=Constants.PROJECT_URL+"codeImg/"+userId+".png";
returnimgName;
}
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript+HTML5特效与技巧汇总》、《JavaScript图片操作技巧大全》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。