Html5 Canvas 实现图片合成
多个图片合成一张
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Html5 Canvas 实现图片合成</title>
<script src="js/jquery-1.8.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Canvas2Image.js" type="text/javascript" charset="utf-8"></script>
<style>
img{border:solid 1px #ddd;}
</style>
</head> <body>
<div align="center" class="img_photo">
<img src="img_clothes/img1.png" width="300">
<img src="img_clothes/img2.png" width="300">
<img src="img_clothes/img3.png" width="300">
<img src="img_clothes/img4.png" width="300">
</div>
<input type="button" value="一键合成" onClick="draw()" style="display:block;width: 60px; margin: 0 auto;">
<div id="imgBox" align="center"></div>
<script>
function draw(fn){
var data1= new Array();
for(var i=0;i<$('.img_photo img').length;i++){
data1[i]=$('.img_photo img').eq(i).attr('src');
}
var c=document.createElement('canvas'),
ctx=c.getContext('2d'),
len=data1.length;
c.width=290;
c.height=290;
ctx.rect(0,0,c.width,c.height);
ctx.fillStyle='transparent';//画布填充颜色
ctx.fill();
function drawing(n){
if(n<len){
var img=new Image;
//img.crossOrigin = 'Anonymous'; //解决跨域
img.src=data1[n];
img.onload=function(){
ctx.drawImage(img,0,0,290,290);
drawing(n+1);//递归
}
}else{
//保存生成作品图片
convertCanvasToImage(c);
Canvas2Image.saveAsJPEG(c); //保存到电脑
}
}
drawing(0);
}
function convertCanvasToImage(canvas) {
var hc_image = new Image();
hc_image.src = canvas.toDataURL("image/png");
$('#imgBox').html(hc_image);
}
</script>
</body>
</html>
Html5 Canvas 实现图片合成的更多相关文章
- Canvas 实现图片合成并下载合成图片
现在经常会遇到那种带二维码的推广图片,如下图所示: 1是整张推广图的背景,2是二维码.这种图片的背景是保持不变的,里面的二维码是变化的.所以我们需要把二维码单独生成然后与背景合并. 我们可以通过can ...
- HTML5 CANVAS 实现图片压缩和裁切
原文地址:http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/?utm_source=tuicool&utm_medi ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 移动端canvas文字图片合成并生成图片(canvas宽度自适应移动端屏幕)
这是我之前做的一个关于文字图片合成的代码,供大家参考,不足支出还望体谅:具体的注释在代码里都有,有什么不懂了可以留言互相交流.<!DOCTYPE html> <html lang=& ...
- html5 canvas画布上合成
source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...
- html5 canvas实现图片玻璃碎片特效
今天要为大家带来一款html5 canvas实现的图片玻璃碎片特效.图片以玻璃碎片的形式出现到界面中,然后似玻璃被打碎的效果渐消息.效果图如下: 在线预览 源码下载 实现代码: html代码: & ...
- HTML5 Canvas 绘制图片不显示的问题
问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完w3c的介绍和很有说服力和教学力的demo后,本着实践出真知的思想决定上手一试,这一试不要紧~ 我按照流水线工程铺设以下几 ...
- HTML5 canvas绘制图片
demo.js window.onload=function() { createcanvas(); drawImage(); } function createcanvas() { var CANV ...
- jquery+html5+canvas实现图片 预览 压缩 上传
javascirpt (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") ...
随机推荐
- maven项目ssh框架的整合
1.环境 eclipse版本:Eclipse Mars2 4.5jdk版本:1.8maven版本:apache-maven 3.3.9zhnegs这是主要的开发工具版本,ssh的各种jar包版本就不列 ...
- Nginx采用yum安装方式及安装后的目录
第一次写博客就不讲究格式了,纯文字了吧 开始 第一步先执行 rpm -ivh http://nginx.org/packages/centos/6/noarch/RPMS/nginx-release- ...
- C#中Invoke的用法()-解决子线程访问主线程控件、线程安全等问题
引自https://www.cnblogs.com/lsgsanxiao/p/5523282.html invoke和begininvoke 区别 一直对invoke和begininvoke的使用和概 ...
- Scratch www 系统搭建
原文地址:https://blog.csdn.net/litianquan/article/details/82735809 Scratch www要基于Nodejs的环境才可以运行,我尝试了在Win ...
- [翻译] EAColourfulProgressView
EAColourfulProgressView 效果: EAColourfulProgressView is a custom progress view where the current fill ...
- 将一种cell当做几种cell使用
将一种cell当做几种cell使用 将一种cell当做几种cell用是有着一些意义的,比如,有时候,不同的cell之间差异很小,如果再派生一个cell出来,就会显得很麻烦,这时候,将这个cell当做几 ...
- Java实例---简单的超市管理系统
代码分析 Customer.java package test; public class Customer { private String name; private int customerTy ...
- recycle bin tip
if you have a question about recycle bin that can look the follow link; http://www.dba-oracle.com/t_ ...
- December 21st 2016 Week 52nd Wednesday
Keep conscience clear, then never fear. 问心无愧,永不畏惧. I find it is very difficult for me to keep consci ...
- codeforces 407D Largest Submatrix 3
codeforces 407D Largest Submatrix 3 题意 找出最大子矩阵,须满足矩阵内的元素互不相等. 题解 官方做法 http://codeforces.com/blog/ent ...