canvas在线生成宣传图片插件(帝国CMS7.2 UTF-8)
演示demo 2017-01-12 16:59:11

整合tx推出的一款AlloyImage，HTML5图片处理引擎

含滤镜，水印，文字

XML/HTML Code复制内容到剪贴板
  1. <script type="text/javascript" src="theme/js/alloyimage.js"></script>  
  2. <ul id="effects" class="effects">  
  3.     <li class="e_item">  
  4.         <div class="imgWrapper">  
  5.         </div>  
  6.     </li>  
  7. </ul>  
  8.   
  9.   
  10. <script>  
  11.     // 初始化  
  12.     function init(){  
  13.         var EasyReflection = {  
  14.             "美肤" : "e1",  
  15.             "素描" : "e2",  
  16.             "自然增强" : "e3",  
  17.             "紫调" : "e4",  
  18.             "柔焦" : "e5",  
  19.             "复古" : "e6",  
  20.             "黑白" : "e7",  
  21.             "仿lomo" : "e8",  
  22.             "亮白增强" : "e9",  
  23.             "灰白" : "e10",  
  24.             "灰色" : "e11",  
  25.             "暖秋" : "e12",  
  26.             "木雕" : "e13",  
  27.             "粗糙" : "e14"  
  28.         };  
  29.   
  30.         var effectModel = '<li class="e_item"><div class="imgWrapper" onmousedown="changeEffect(this)"><img src="theme/images/effect/{pic}.png" alt="" />{effect}</div></li>';  
  31.   
  32.         var html = '<li class="e_item"><div class="imgWrapper" onmousedown="changeEffect(this)"><img src="theme/images/effect/e1.jpg" alt="" />原图</div></li>';  
  33.         for(var i in EasyReflection){  
  34.             html += effectModel.replace("{effect}",i.length < 3 ? i + "效果" : i).replace("{pic}", EasyReflection[i]);  
  35.         };  
  36.         // 获取各处理效果图填充html  
  37.         document.getElementById("effects").innerHTML = html;  
  38.     }  
  39.   
  40.     // 滤镜处理  
  41.     function changeEffect(obj){  
  42.         var text = obj.childNodes[1].nodeValue.replace("效果","");  
  43.   
  44.         if(text == "原图"){  
  45.             var a = obj.firstChild;  
  46.             var url = a.getAttribute("src");  
  47.             img.setAttribute("src", originalImage);  
  48.         }else{  
  49.             msgEle.style.display = "block";  
  50.             setTimeout(function(){  
  51.                 ai.clone().ps(text).replace(img).complete(function(){  
  52.                     msgEle.style.display = "none";  
  53.                 });  
  54.             }, 2);  
  55.         }  
  56.     }  
  57. </script>  

 

 

 

1、上传：

XML/HTML Code复制内容到剪贴板
  1. <input type="file" name="file_input" id="file_input" class="file_input" value="打开文件" />  
  2.   
  3. <!-- 显示默认图片，也可以为空 -->  
  4. <img src="theme/pic/demo/bulding.jpg" class="pic" id="pic" alt="" draggable="false"/>  

 

2、javascript：

JavaScript Code复制内容到剪贴板
  1. img = document.getElementById("pic");  
  2. uploadBtn = document.getElementById("file_input");  
  3.   
  4. bindButtonEvent(uploadBtn, "change", openFile);  
  5.   
  6. function bindButtonEvent(element, type, handler)  
  7. {  
  8.     if(element.addEventListener) {  
  9.         element.addEventListener(type, handler, false);  
  10.     } else {  
  11.         element.attachEvent('on'+type, handler);  
  12.     }  
  13. }  
  14.   
  15. // 打开图片文件,uploadBtn全局变量  
  16. function openFile(){  
  17.     if(typeof FileReader==='undefined'){  
  18.         layer.msg("抱歉，你的浏览器不支持 FileReader");  
  19.         uploadBtn.setAttribute('disabled','disabled');  
  20.     }else{  
  21.         layer.load();  
  22.         var file = uploadBtn.files[0];  
  23.         if(!/image\/\w+/.test(file.type)){  
  24.             layer.closeAll('loading');  
  25.             layer.msg("上传的文件必须为图片格式~");  
  26.             return false;  
  27.         }  
  28.         var reader = new FileReader();  
  29.         reader.readAsDataURL(file);  
  30.         reader.onload = function(e){  
  31.             img.setAttribute("src",this.result);  
  32.             layer.closeAll('loading');  
  33.         }  
  34.     }  
  35. }  

 

canvas 两张图片绘图：

PHP Code复制内容到剪贴板
  1. // 绘图，backgroundPic和waterImg参数为指定的dom  
  2. function composite(backgroundPic,waterImg){  
  3.     var canvas = document.getElementById("myCanvas");  
  4.     var ctx = canvas.getContext("2d");  
  5.     //绘制图片，无缩放  
  6.     //1、加载背景图  
  7.     if(backgroundPic){  
  8.         canvas.width = backgroundPic.width;  
  9.         canvas.height = backgroundPic.height;  
  10.         ctx.drawImage(backgroundPic, 0, 0);  
  11.     }  
  12.   
  13.     // 如果有水印图的话  
  14.     if(waterImg){  
  15.         //2、加载水印图片  
  16.         var img2 = new Image(100, 300);  
  17.         img2.src = waterImg.getAttribute("src");  
  18.         ctx.drawImage(img2,20,20);  
  19.     }  
  20. }  

 

保存canvas为本地图片：

XML/HTML Code复制内容到剪贴板
  1. <canvas id="myCanvas" width="750" height="1334"></canvas>  
  2. <a class="save-local-img">保存</a>  
  3.   
  4. <script>  
  5. // 保存为本地图片  
  6. $(".save-local-img").click(function(){  
  7.     downloadCanvas(this, 'myCanvas', 'download.png');  
  8. });  
  9.   
  10. // canvas 保存为本地图片  
  11. function downloadCanvas(link, canvasId, filename) {  
  12.     link.href = document.getElementById(canvasId).toDataURL();  
  13.     link.download = filename;  
  14. }  
  15. </script>  

 

 

本文来自于：http://www.yoyo88.cn/demo/65.html

在线演示 (227)
上一篇 帝国CMS7.2 机器人插件
下一篇 echarts图形统计
相关的文章
Powered by yoyo苏ICP备15045725号