多个图片合成一张

<!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 实现图片合成的更多相关文章

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

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

  2. HTML5 CANVAS 实现图片压缩和裁切

    原文地址:http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/?utm_source=tuicool&utm_medi ...

  3. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  4. 移动端canvas文字图片合成并生成图片（canvas宽度自适应移动端屏幕）

    这是我之前做的一个关于文字图片合成的代码,供大家参考,不足支出还望体谅:具体的注释在代码里都有,有什么不懂了可以留言互相交流.<!DOCTYPE html> <html lang=& ...

  5. html5 canvas画布上合成

    source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...

  6. html5 canvas实现图片玻璃碎片特效

    今天要为大家带来一款html5 canvas实现的图片玻璃碎片特效.图片以玻璃碎片的形式出现到界面中,然后似玻璃被打碎的效果渐消息.效果图如下: 在线预览   源码下载 实现代码: html代码: & ...

  7. HTML5 Canvas 绘制图片不显示的问题

    问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完w3c的介绍和很有说服力和教学力的demo后,本着实践出真知的思想决定上手一试,这一试不要紧~ 我按照流水线工程铺设以下几 ...

  8. HTML5 canvas绘制图片

    demo.js window.onload=function() { createcanvas(); drawImage(); } function createcanvas() { var CANV ...

  9. jquery+html5+canvas实现图片 预览 压缩 上传

    javascirpt (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") ...

随机推荐

  1. Vue.js双向绑定原理

    Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...

  2. 【眼见为实】自己动手实践理解数据库READ COMMITTED && MVCC

    [READ COMMITTED] 首先设置数据库隔离级别为读已提交(READ COMMITTED): set global transaction isolation level READ COMMI ...

  3. 【QT】在子窗体中控制父窗体

    [背景说明]我的主窗体的名字叫做MainWindow,其子窗口是一个叫subDialog的类.我现在想做的是在子窗口的函数中调用父窗口. 在父窗口中打开子窗口 //弹出对话框确定变换的参数 subDi ...

  4. maven(18)-mybatis generator插件

     generator的作用 使用mybatis框架,在初始项目或修改数据库时,相应的要在JAVA项目中去写一些数据模型文件,DAO,映射XML等配置,而这个插件的作用就是自动生成这些文件,以节省大 ...

  5. Linux常用基本指令——文件处理命令

    书籍方面的推荐就不做介绍,免得别人说我有广告嫌疑.大家可以直接上百度,书籍和视频遍地都是,Linux这些方面的知识都是自己在学习视频和看书的总结,内容上可能会不完美.如果有更多的见解,欢迎直接评论. ...

  6. Java中执行.exe文件

    public static void main(String args[]){ try { String command ="notepad"; // 笔记本 Process ch ...

  7. 一、python小功能记录——监听键盘事件

    1.监听键盘按键 from pynput.keyboard import Listener def press(key): print(key.char) with Listener(on_press ...

  8. POP3、SMTP端口（SSL、TSL）

    POP3服务器地址: 110           995 支持SSLSMTP服务器地址: 25            465 或者 587 支持SSL(TSL) 465端口是SSL/TLS通讯协议的 ...

  9. webapi 支持 text/plain 请求

    今天遇到一个需求,请求以HTTPS + XML 访问我的API ,普通的webapi 是不支持这个请求的,故做以下代码进行支持 新增一个类,类名为PlainTextTypeFormatter publ ...

  10. Windows 下安装Python包(Numpy)的错误：Unable to find vcvarsall.bat

    情景简介: Windows 环境下安装Python2.7的Numpy扩展包时提示:error: Unable to find vcvarsall.bat 经过不懈的Google/Bing,发现不仅安装 ...