<!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. 如何判断一个对象实例是不是某个类型，如Cat类型

    <script> function cat(){} var b = new cat(); if(b instanceof cat){ console.log("a是cat&quo ...

  2. Beautiful Soup解析网页

    使用前步骤: 1.Beautiful Soup目前已经被移植到bs4,所以导入Beautiful Soup时先安装bs4库. 2.安装lxml库:如果不使用此库,就会使用Python默认的解析器,而l ...

  3. sql查询字段中的值长度最大的记录

    SELECT max(length(字段)) FROM 表名;

  4. 51nod 1812 树的双直径 题解【树形DP】【贪心】

    老了-稍微麻烦一点的树形DP都想不到了. 题目描述 给定一棵树,边权是整数 \(c_i\) ,找出两条不相交的链(没有公共点),使得链长的乘积最大(链长定义为这条链上所有边的权值之和,如果这条链只有 ...

  5. Codeforces - 914C 数位DP

    题意有点难以描述,简略的就是给定一个二进制\(n\),每一步操作能使\(n\)的位为1的数的和转化为一个十进制,然后转化为该数的二进制再进行相同的操作 查询\([0,n]\)中操作数恰好为\(k\)的 ...

  6. Q606 根据二叉树创建字符串

    你需要采用前序遍历的方式,将一个二叉树转换成一个由括号和整数组成的字符串. 空节点则用一对空括号 "()" 表示.而且你需要省略所有不影响字符串与原始二叉树之间的一对一映射关系的空 ...

  7. appium关于当前网络情况测试，实现打开关闭网络（python3.4版）

    appium关于当前网络情况测试,实现打开关闭网络(不需要root测试机) # python from appium.webdriver.connectiontype import Connectio ...

  8. 第六次 Scrum Meeting

    第六次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/4/10 22:00 30min 大运村1号楼6F 附Github仓库:WEDO 例会照片 工作情况总结(4.10 ...

  9. SpringCloud---客户端负载均衡---Spring Cloud Ribbon

    1.概述 1.1 Spring Cloud Ribbon是一个基于HTTP和TCP的客户端负载均衡工具: 基于Netflix Ribbon实现: 通过Spring Cloud的封装,可以轻松将面向服务 ...

  10. 如何在react&webpack中引入图片？

    在react&webpack项目中需要引入图片,但是webpack使用的模块化的思想,如果不进行任何配置,而直接在jsx或者是css中使用相对路径来使用就会出现问题,在webpack中提供了u ...