Canvas合成图像 比较简单 看代码和demo
2015-07-09 16:58
447 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> *{ margin:0; padding:0; } .center{ text-align: center; } </style> </head> <body> <div class="center"> <img src="1.jpg" alt="" /> <img src="2.png" alt="" /> </div> <button onclick="date()">生成</button> <div id="imgBox" style="width:1000px;height:800px;"> </div> </body> <script> var data=["1.jpg","2.png"],base64=[]; function date(){ var Mycanvas=document.createElement("canvas"), ct=Mycanvas.getContext("2d"), len=data.length; Mycanvas.width=640; Mycanvas.height=386; ct.rect(0,0,Mycanvas.width,Mycanvas.height); ct.fillStyle='#fff'; ct.fill(); function draw(n){ if(n<len){ var img=new Image; img.crossOrigin = 'Anonymous'; //解决跨域 img.src=data ; console.log(data ); img.onload=function(){ ct.drawImage(this,0,0,640,386); draw(n+1); } }else{ base64.push(Mycanvas.toDataURL("image/png")); document.getElementById("imgBox").innerHTML='<img src="'+base64[0]+'">'; } } draw(0) } </script> </html>demo:http://sandbox.runjs.cn/show/kozthrpo
相关文章推荐
- 使用 Lombok 简化项目中无谓的Java代码
- Canvas合成图像 比较简单 看代码和demo
- java-String中的 intern()
- c++ 函数返回指针 及用法
- C/C++校招笔试面试经典题目总结二
- C#获取类中所有方法
- 面向holder的编程,代码更清爽,管理更简单
- java设计模式之适配器模式
- Java类加载器
- Java tutorial 3
- python 中文乱码问题深入分析
- Java中的static关键字解析(转自海子)__为什么main方法必须是static的,因为程序在执行main方法的时候没有创建任何对象,因此只有通过类名来访问。
- DEV-aspxgridview中的javascprit中获取所有行
- lua string
- JAVA基础题
- Ubuntu 12.04安装Sun JDK 6
- c# Type.InvokeMember用法
- thinkphp框架中session常识
- 黑马程序员——C语言基础---预处理指令及其他
- java 导出excel