canvas合成图片 圣诞节新技能戴帽

<!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="images/person.jpg" width="300">
<img src="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.οnlοad=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)
}
})

转载于:https://www.cnblogs.com/heshimei/p/8136347.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/428398.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

webdav 软件_6 款功能强大的工具软件,有一款人人必备

DaVinci Resolve(达芬奇)DaVinci Resolve 是一款视频后期处理调色软件。它可能是最强大的色彩音频视觉调色软件。它最高支持8K 视频编辑。不管是业余爱好者还是好莱坞专业的视频&#xff0c;使用它都可以满足需求。它还支持处理视觉特效和3D 空间。它有250 种可以合成矢量图片&…

python 访问sas 逻辑库,SAS | 逻辑库和SAS数据集

[TOC]1 临时和永久数据集SAS数据集名称SAS数据集有临时和永久两种存在方式。所有的SAS数据集都有一个两级名称&#xff0c;两个层级之间用句点.分隔。第一层级&#xff1a;逻辑库引用名第二层级&#xff1a;数据集名称注意&#xff0c;两级名称出现在 DATA 语句和 DATA 选项中逻…

Plugin org.apache.maven.plugins:maven-resources-plugin:2.6

创建maven project时工程报错Plugin org.apache.maven.plugins:maven-resources-plugin:2.6 or one of its dependencies could not be resolved: Failed to read artifact descriptor for org.apache.maven.plugins:maven-resources-plugin:jar:2.6: Could not transfer artif…

em算法详细例子及推导_第九章-EM算法

从第九章开始&#xff0c;学习总结的东西有所不同了&#xff0c;第2-8章是分类问题&#xff0c;都属于监督学习&#xff0c;第9章EM算法是非监督学习。本文主要是总结EM算法的应用以及处理问题的过程和原理推导。EM算法EM算法(期望极大算法 Expectation Maximization Algorithm…

python打开文件要wordcloud吗,使用python创建wordcloud

我正在尝试在清理文本文件后在python中创建wordcloud,我得到了所需的结果,即大多数在文本文件中使用但无法绘制的单词.我的代码&#xff1a;import collectionsfrom wordcloud import WordCloudimport matplotlib.pyplot as pltfile open(example.txt, encoding utf8 )stopwo…

手机百度输入法的用户体验

我的手机用的是手机百度输入法&#xff0c;首先从用户界面来说吧&#xff0c;默认的界面简洁&#xff0c;但是特别大方。不会让人觉得界面简单。而且还提供了几个不同的界面风格&#xff0c;可供不同喜好的用户选择&#xff0c;这就十分人性化了。然后就是从记住用户选择来说&a…

java商城_java开源商城系统的优势是什么?

电商平台开发大家都知道&#xff0c;java开放性源码提供了开发商便利&#xff0c;经过开发商对源码的二次修改&#xff0c;在系统的易用性和实用性方面都得到了空前的突破&#xff0c;真正达到了只要会打字就能够建设专业水准的商城系统。采用java开源商城系统的商城都有安全、…

php无限加载,php递归无限页面加载

我有一个linux bash脚本,它不断运行并请求一个php页面.php页面做了一些魔术,在500ms之后bash脚本再次请求php页面,php做了一些魔术.这日复一日地运行,但有时bash崩溃,这意味着我需要登录到机器并再次运行脚本.不,我正在寻找完全由PHP驱动的解决方案.我做了以下测试,但是不行.文…

hbase rest api接口链接管理【golang语言版】

# go-hbase-resthbase rest api接口链接管理【golang语言版】关于hbase的rest接口的详细信息可以到官网查看[http://hbase.apache.org/book.html#_rest]测试环境&#xff1a;ubuntu16.04hadoop2.4.0hbase1.2.6jdk1.8.0_141联系作者&#xff1a;qizexi163.com快速体验&#xff1…

裸奔浏览器_躲进浏览器隐私模式就安全了吗?相当于闭着眼睛裸奔

「隐私模式」是浏览器的一个功能&#xff0c;记得小淙第一次看到这个充满安全感的名字时&#xff0c;心中一阵狂喜&#xff0c;如获珍宝&#xff0c;从此走上了不归路。多少个寂寞难耐的夜&#xff0c;我默默打开隐私模式&#xff0c;页面中间黑色的小人是我最默契的战友&#…

oracle表回退语句,5 Oracle笔试题

一、选择题(每题2分)1.你要对操纵Oracle数据库中的数据。下列哪个选项表示Oracle中select语句的功能&#xff0c;并且不需要使用子查询&#xff1f;A&#xff0e;可以用select语句改变Oracle中的数据 B&#xff0e;可以用select语句删除Oracle中的数据C&#xff0e;可以用selec…

Linux学习之基本介绍

技术不分年龄高低&#xff0c;只分水平高低。 搞技术25k以下是不看天赋的&#xff0c;25k以上是要看天赋的。 1U服务器&#xff0c;2U服务器&#xff0c;刀片服务器。程序都是运行在服务器上的。 榜样的力量是无穷的。--MK。 汇编语言跟硬件息息相关&#xff0c;汇编语言开发的…

什么是ie浏览器_?IE 浏览器为什么不招人待见?

在一篇博客中&#xff0c;微软将 Internet Explorer 称为「兼容性解决方案」&#xff0c;而不是浏览器。在全球最大的桌面操作系统上推广浏览器&#xff0c;成功看起来是理所当然的&#xff0c;但 IE 却没能做到。在上周发布的一篇博客中&#xff0c;微软将 Internet Explorer …

ORACLE使用copy方式存储迁移,详细讲解Oracle数据库的数据迁移方法

添加所需的表空间和用户到目标数据库中&#xff1b;安装所需的SQL&#xff0a;Net2或者Net8软件&#xff0c;并配置用于连接数据库的别名。在DOS命令提示符下设置oracle_sidOracle7_sid。以Internal用户账号连接SQL&#xff0a;PLUS。创建一个从Oracle7数据库到Oracle8i数据库的…

JS脚本病毒调试脚本-Trojan[Downloader]:JS/Nemucod

1、前言 遇到Trojan[Downloader]:JS/Nemucod需要分析&#xff0c;这款病毒主要为js运行。从网上各种找js调试方法。发现52的帖子还挺沾边的。 TrojanDownloader:JS/Nemucod分析【原创翻译】https://www.52pojie.cn/forum.php?modviewthread&tid513740 结果用帖子里的代码一…

富士通台式电脑_电脑bios怎么进入-电脑bios进入方法介绍

很多用户在使用电脑时候想要进入BIOS系统&#xff0c;但是不知道该按那个按键操作&#xff0c;其实不同品牌的电脑和不同主板的电脑进入BIOS按键都是不一样的&#xff0c;小编整理了一写不同电脑进入BIOS的方法&#xff0c;一起来看看吧~ 电脑bios进入方法介绍&#xff1a; 一、…

四阶混合累积量matlab_12m氢燃料电池城市客车电电混合动力系统设计方案

文章来源&#xff1a;《12m氢燃料电池城市客车电电混合动力系统设计方案》随着氢燃料电池技术的进步&#xff0c;氢燃料电池客车的优势越发明显&#xff0c;和传统客车比&#xff0c;零污染&#xff64;零排放;和纯电动客车比&#xff0c;加注燃料速度快&#xff64;续航里程更…

bzoj1094[ZJOI2007]粒子运动 计算几何

1094: [ZJOI2007]粒子运动 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 658 Solved: 164[Submit][Status][Discuss]Description 阿Q博士正在观察一个圆形器皿中的粒子运动。不妨建立一个平面直角坐标系&#xff0c;圆形器皿的圆心坐标为(x0, y0)&#xff0c;半径为R。器…

linux自动挂载磁盘命令,使用mount命令配置Linux自动挂载

使用mount命令来挂载硬件&#xff0c;在Linux重启后这些挂载信息会丢失&#xff0c;因此对应磁盘这类硬件&#xff0c;需要配置自动挂载来保证系统重启时进行自动挂载。自动挂载信息保存在文件/etc/fstab文件中查看该文件的数据&#xff1a;rootlocalhost dev]# cat /etc/fstab…

webview 防止js注入_天台县js聚合物水泥防水涂料的作用

天台县js聚合物水泥防水涂料的作用 2、JS防水涂料建筑胶粉与801建筑胶水的区别在哪?彩色聚氨酯防水涂料施工要点&#xff1a; 彩色聚氨酯防水涂料注意事项&#xff1a;1、材料必须按配比混合搅拌均匀&#xff0c;混合后的物料应在20分钟内用完。2、施工温度宜在5℃以上&#x…