<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Html5 Canvas 实现图片合成</title>
<link rel="stylesheet" href="public.css">
<style>
img{ border:solid 1px #ddd;}
</style>
</head>

<body>
<div align="center">
<img src="data:images/person.jpg" width="300">
<img src="data:images/christmas_cap.png" width="300">
</div>
<div id="imgBox" align="center">
<input type="button" value="一键合成" onClick="hecheng()">
</div>
<script>
/*
@作者：外号老徐
@邮箱：442413729@qq.com
@网址：http://www.loveqiao.com
*/
function hecheng(){
draw(function(){
document.getElementById('imgBox').innerHTML='<p style="padding:10px 0"></p><img src="'+base64[0]+'">';
})
}
var data=['images/person.jpg','images/christmas_cap.png'],base64=[];
function draw(fn){
var c=document.createElement('canvas'),
ctx=c.getContext('2d'),
len=data.length;
c.width=290;
c.height=290;
ctx.rect(0,0,c.width,c.height);
ctx.fillStyle='#fff';
ctx.fill();
function drawing(n){
if(n<len){
var img=new Image;
img.setAttribute('crossOrigin', 'anonymous');
img.src=data[n];
img.onload=function(){
if(n == 1){
ctx.rotate(10*Math.PI/180);
ctx.drawImage(img,100,-75, 85,85);
}else{
ctx.drawImage(img,0,0, 300,300);
}

drawing(n+1);//递归
}
}else{
//保存生成作品图片
base64.push(c.toDataURL("image/jpeg",0.8));
fn();
}
}
drawing(0);
}
</script>
<script src="jquery.js"></script>
</body>
</html>

$.extend({
setCookie:function(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())+';path=/';
},
getCookie:function(c_name){
if (document.cookie.length>0){
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1){
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
},
clearCookie:function(c_name){
$.setCookie(c_name,'',0)
}
})

canvas合成图片 圣诞节新技能戴帽的更多相关文章

  1. 通过canvas合成图片

    通过canvas合成图片 效果图 页面布局部分 两个图片以及一个canvas画布 <img src="https://qnlite.gtimg.com/qqnewslite/20190 ...

  2. [JavaScript] canvas 合成图片和文字

    Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...

  3. 用canvas合成图片

    朋友圈有些分享功能是通过长按图片另存来实现的,就像淘宝内部要分享朋友圈的时候一样,这些图片可以用canvas来合成. 获取了img的dom对象以后,进行base64的转. //加载对象$page.ge ...

  4. Canvas 实现图片合成并下载合成图片

    现在经常会遇到那种带二维码的推广图片,如下图所示: 1是整张推广图的背景,2是二维码.这种图片的背景是保持不变的,里面的二维码是变化的.所以我们需要把二维码单独生成然后与背景合并. 我们可以通过can ...

  5. Html5 Canvas 实现图片合成

    多个图片合成一张 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  6. vue 把后端返回的图片和url链接生成的二维码用canvas 合成一张图片

    H5 页面在做某个活动的时候,有两种分享方式,一种是链接分享,一种是图片分享. 链接分享的话,如果是在微信里,就可引导用户利用微信浏览器自带的分享,根据sdk设置分享标题简介链接缩略图即可. 图片分享 ...

  7. vue 合成图片

    目的:将二维码图片和背景图片合成变成一张图片 方法一: 引入依赖 cnpm install qrcanvas --save cnpm install html2canvas --save 具体代码: ...

  8. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

  9. canvas学习笔记：canvas对图片的像素级处理--ImageData的应用

    学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...

随机推荐

  1. 编程开发之--Oracle数据库--存储过程使用动态参数绑定（3）

    1.动态参数绑定,可以实现动态的执行不同的sql --创建包 create or replace PACKAGE MYPACKAGE AS type empcursor is ref cursor; ...

  2. 在eclips中配置maven

    可参考https://jingyan.baidu.com/article/59703552cb9b988fc00740a4.html

  3. 对EM算法的理解

    EM算法中要寻找的参数θ,与K-means聚类中的质心是对应的,在高斯混合模型中确定了θ,便可为样本进行类别的划分,属于哪个高斯分布的概率大就是哪一类,而这一点与K-means中的质心一样,质心确定了 ...

  4. centos的用户的基本操作

    :一:查看当前系统中的用户账号 grep bash /etc/passwd 二:利用root用户(超级管理员给普通用户修改密码)--------  root用户可以修改其他所有人的密码,且不需要验证 ...

  5. [Alpha]Scrum Meeting#2

    github 本次会议项目由PM召开,时间为4月2日晚上10点30分 时长25分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写内置问卷(issue#3) 撰写团队贡献分配计划(issue#39) ...

  6. js高级程序设计 笔记 --- 表单

    一,基础知识 在html中,表单是form元素,而在js中,表单对应的是HTMLFormElement类型,继承自HTMLElement,其独特的属性和方法有(常见): action:接收请求的URL ...

  7. 批量生成python自动化测试脚本

    先前有家供应商与我们合作开发自动化工程,采用的py unittest作为脚本运行框架.我发现他们出的脚本都是挨个手写的,格式上也是参差不齐.所以有了根据用例表批量生成脚本的一段小代码 对一个测试脚本必 ...

  8. Dijkstra实现最短路径

    #include<cstdio> #include<iostream> #include<algorithm> using namespace std; const ...

  9. epoll_wait 返回值学习以及epoll使用学习

    https://blog.csdn.net/analogous_love/article/details/88721574

  10. Ubuntu14.04下编译安装或apt-get方式安装搭建Apache或Httpd服务（图文详解）

    不多说,直接上干货! 写在前面的话 对于 在Ubuntu系统上,编译安装Apache它默认路径是在/usr/local/apache2/htdocs 或者编译安装httpd它默认路径是在/usr/lo ...