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

来源:脚本之家  责任编辑:小易  

指定两个canvas的postion:absolution,然后设置者两个canvas的left与top属性,需要注意的是建议把小的canvas放到上面,方法是设置两个canvas的z-index为不同的值,值大的在上面。绘图的过程可以参考一下代码:var mycanvas=document.getElementByIdx_x_x_x("mycanvas");var context=mycanvas.getContext("2d");var imageObj=new Image();imageObj.onload=function(){draw cropped imagevar sourceX=350;var sourceY=50;var sourceWidth=350;var sourceHeight=350;var destWidth=sourceWidth;var destHeight=sourceHeight;var destX=mycanvas.width/2-destWidth/2;var destY=mycanvas.height/2-destHeight/2;context.drawImage(imageObj,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight);www.zgxue.com防采集请勿采集本网。

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

flash吧 这个毕竟不比flash那么绚烂

JS和canvas的合成方式

!DOCTYPE HTML> recursion function mouseOver(obj) { obj.src=\"封面图片1.2.jpg } function mouseOut(obj) { obj.src=\"封面图片1.jpg } 第一大板块.

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); } }}

!title> function change_pic(){ var img1=document.getElementById('img1');var img2=document.getElementById('img2');我在桌面上放了两张图片,你也可以试试

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

您好,我来为您解 本身他是按像素的方式渲染,所以你就1px的空心圆形,太小了,边缘会出现模糊,如果圆画大一点情况就会消失。或者你可以先平移下坐标,让你的中心坐标点是整数,再试看看。

java的实现方式

按照你的描述,估计你之前的代码有调用过 ctx.scale 或者 ctx.transform 函数,导致坐标轴被缩放了。建议找到对应的缩放调用,合理使用 ctx.save 和 ctx.restore 函数,来避免上下文环境污染

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+HTML5特效与技巧汇总》、《JavaScript图片操作技巧大全》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

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

可能是你设置的时间不合适(canvas的截图时间单位,你设置是秒还是毫秒?如果是3毫秒截图的效果就基本一样。如果你的video视频在某个时间段基本没有动(片头片尾)这样截图效果很可能类似内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • javascript canvas绘制折线图
  • 原生js基于canvas实现一个简单的前端截图工具代码实例
  • js canvas实现5张图片合成一张图片
  • 原生js使用canvas实现拖拽式绘图功能
  • js+html5 canvas实现ps钢笔抠图
  • js canvas实现二维码和图片合成的海报
  • js canvas实现画图、滤镜效果
  • javascript canvas基于数组生成柱状图代码实例
  • 一篇文章带你浅入webpack的dll优化打包
  • 浅析javascript使用include/require
  • javascript实现简单查找与替换的方法
  • javascript工具库mytools详解
  • jquery 常用方法一览表(集合)
  • javascript实现滑动导航栏效果
  • js检查是否关闭浏览器的方法
  • js数字转换为float,取n位小数
  • js日期、星座的级联显示代码
  • bootstrap教程js插件弹出框学习笔记分享
  • js video通过canvas截屏两次 图片一模一样
  • html5 两个canvas重叠放在一个div里面,每个canvas各填充一张图片,代码怎么写?
  • js中怎么把两张图片的合并为一张图片
  • HTML5如何通过canvas,把两张图片绘制到画布,然后导出大图
  • js 不使用css3 canvas 等技术,怎么实现图片的任意角度旋转
  • js按钮动画如何实现两张图片分别在鼠标在上面的时候变样子。
  • 求一段点击按钮两张图片互换的js
  • 用HTML5中canvas加js代码把下面这张图片绘制出釆
  • HTML5、JS的canvas绘制图片的问题。。
  • JS 怎么实现两张图片 鼠标放上去切换另一张图片, 鼠标离开是一张图,麻烦
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧javascript+html5特效与技巧汇总javascript图片操作技巧大全javascript图形绘制技巧总结javascript错误与调试技巧总结javascript数据结构与算法技巧总结javascript遍历算法与技巧总结javascript数学运算用法总结javascript canvas绘制折线图原生js基于canvas实现一个简单的前端截图工具代码实例js canvas实现5张图片合成一张图片原生js使用canvas实现拖拽式绘图功能js+html5 canvas实现ps钢笔抠图js canvas实现二维码和图片合成的海报js canvas实现画图、滤镜效果javascript canvas基于数组生成柱状图代码实例一篇文章带你浅入webpack的dll优化打包浅析javascript使用include/requirejavascript实现简单查找与替换的方法javascript工具库mytools详解javascript实现滑动导航栏效果js检查是否关闭浏览器的方法js数字转换为float,取n位小数js日期、星座的级联显示代码bootstrap教程js插件弹出框学习笔记分享js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js删除数组里的某个元素方法javascript深入理解js闭包javascript 页面只自动刷新一次使用store来优化react组件的方法offlinesave离线保存代码再次发布使用说明js数组的赋值介绍bootstrapvalidator实现表单验证功能javascript微信定位功能实现方法javascript 继承详解 第一篇巧用javascript的逻辑运算符javascript 动态改变onclick事件触发函数js 获取json数组里面数组的长度实例
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved