js插件---画图软件wePaint如何使用(插入背景图片,保存图片,上传图片)
一、总结
一句话总结:万能的wPaint方法,通过不同的参数执行不同的操作。比如清空画布参数传"clear",获取图片数据参数是"image"等等
1、wePaint如何保存图片?
a、找到canvas对象,通过wPaint("image")方法获取 image数据
b、将获取的image数据赋值给一个img标签的src属性
1 function saveImage2() 2 { 3 var imageData2 = $("#wPaint2").wPaint("image"); 4 $("#canvasImage2").attr('src', imageData2); 5 }
2、wePaint如何上传图片?
a、找到canvas对象,通过wPaint("image")方法获取 image数据
b、将这个获取的image数据通过ajax上传到服务器即可
1 function upload_image(id) 2 { 3 var imageData = $("#" + id).wPaint("image"); 4 $.ajax({ 5 url: '/wPaint/upload.php', 6 data: {image: imageData}, 7 type: 'post', 8 success: function(resp) 9 { 10 alert('successfully uploaded image!'); 11 } 12 }); 13 }
这样保存的图片直接赋值给img标签的src属性就可以显示了
3、打开wePaint的时候如何载入背景图片?
js初始wePaint的时候传入图片参数(我们可以直接传入base64格式的图片数据)
就是我们上传图片存入数据库里面的内容
1 $("#wPaint2").wPaint({ 2 menuOrientation: 'vertical', 3 image: "data:image/png;base64,iVBORw(中间省略一大段字母)YII=", 4 imageBg: 'images/demo/wPaint.png' 5 });
4、wePaint如何加载图片?
直接调用wPaint方法即可
1 function loadImage_png() 2 { 3 $("#wPaint").wPaint("image", "images/demo/wPaint.png"); 4 }
5、如何清空绘画板?
还是wPaint方法,只是传入参数编程了clear
1 function clearCanvas() 2 { 3 $("#wPaint").wPaint("clear"); 4 }
二、js插件---画图软件wePaint如何使用(插入背景图片,保存图片,上传图片)
百度盘下载地址:链接:https://pan.baidu.com/s/1bTU3TCeidcjPYhUtAaYfSA 密码:m14p
1、截图
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Websanova Paint</title> 6 7 <!-- jQuery --> 8 <script type="text/javascript" src="./inc/jquery.1.8.2.min.js"></script> 9 <script type="text/javascript" src="./inc/jquery.ui.core.min.js"></script> 10 <script type="text/javascript" src="./inc/jquery.ui.widget.min.js"></script> 11 <script type="text/javascript" src="./inc/jquery.ui.mouse.min.js"></script> 12 <script type="text/javascript" src="./inc/jquery.ui.draggable.min.js"></script> 13 14 <!-- wColorPicker --> 15 <link rel="Stylesheet" type="text/css" href="./inc/wColorPicker.css" /> 16 <script type="text/javascript" src="./inc/wColorPicker.js"></script> 17 18 <!-- wPaint --> 19 <link rel="Stylesheet" type="text/css" href="./wPaint.css" /> 20 <script type="text/javascript" src="./wPaint.js"></script> 21 22 </head> 23 <body> 24 25 <h2>Default</h2> 26 27 <table><tr> 28 <td> 29 <div id="wPaint" style="position:relative; 500px; height:300px; background:#CACACA; border:solid black 1px;"></div> 30 </td><td> 31 <img id="canvasImage" src=""/> 32 </td> 33 </tr><tr> 34 <td colspan="2"> 35 <div> 36 <a href="javascript:loadImage_base64();">load image (base64 encoded)</a> | 37 <a href="javascript:loadImage_png();">load image (png)</a> | 38 <a href="javascript:loadImage_jpg();">load image (jpg)</a> | 39 <a href="javascript:saveImage();">save image</a> | 40 <a href="javascript:clearCanvas();">clear canvas</a> 41 <input type="button" value="Upload Image" onclick="upload_image('wPaint');"/> 42 </div><br/> 43 44 image data: <input id="canvasImageData" type="text" /> 45 down: <input id="canvasDown" type="text" /> 46 move: <input id="canvasMove" type="text" /> 47 up: <input id="canvasUp" type="text" /> 48 </td> 49 </tr></table> 50 51 <script type="text/javascript"> 52 var wp = $("#wPaint").wPaint({ 53 image: "data:image/png;base64,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", 54 drawDown: function(e, mode){ $("#canvasDown").val(this.settings.mode + ": " + e.pageX + ',' + e.pageY); }, 55 drawMove: function(e, mode){ $("#canvasMove").val(this.settings.mode + ": " + e.pageX + ',' + e.pageY); }, 56 drawUp: function(e, mode){ $("#canvasUp").val(this.settings.mode + ": " + e.pageX + ',' + e.pageY); } 57 }).data('_wPaint'); 58 59 function loadImage_base64() 60 { 61 $("#wPaint").wPaint("image", "data:image/png;base64,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"); 62 } 63 64 function loadImage_png() 65 { 66 $("#wPaint").wPaint("image", "images/demo/wPaint.png"); 67 } 68 69 function loadImage_jpg() 70 { 71 $("#wPaint").wPaint("image", "images/demo/wPaint.jpg"); 72 } 73 74 function saveImage() 75 { 76 var imageData = $("#wPaint").wPaint("image"); 77 78 $("#canvasImage").attr('src', imageData); 79 $("#canvasImageData").val(imageData); 80 } 81 82 function clearCanvas() 83 { 84 $("#wPaint").wPaint("clear"); 85 } 86 87 function upload_image(id) 88 { 89 var imageData = $("#" + id).wPaint("image"); 90 91 $.ajax({ 92 url: '/wPaint/upload.php', 93 data: {image: imageData}, 94 type: 'post', 95 success: function(resp) 96 { 97 alert('successfully uploaded image!'); 98 } 99 }); 100 } 101 </script> 102 103 104 <h2>Load Image With Background</h2> 105 The background cannot be modified, but will be part of the save (try the eraser): 106 107 <table><tr> 108 <td> 109 <div id="wPaint2" style="position:relative; 500px; height:300px; background:#CACACA; border:solid black 1px;"></div> 110 </td><td> 111 <img id="canvasImage2" src=""/> 112 </td> 113 </tr><tr> 114 <td colspan="2"> 115 <div> 116 <a href="javascript:saveImage2();">save image</a> | 117 <a href="javascript:updateBg2();">update bg</a> 118 <input type="button" value="Upload Image" onclick="upload_image('wPaint2');"/> 119 </div><br/> 120 </td> 121 </tr></table> 122 123 <br/><br/> 124 125 <script type="text/javascript"> 126 $("#wPaint2").wPaint({ 127 menuOrientation: 'vertical', 128 image: "data:image/png;base64,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", 129 imageBg: 'images/demo/wPaint.png' 130 }); 131 132 function saveImage2() 133 { 134 var imageData2 = $("#wPaint2").wPaint("image"); 135 136 $("#canvasImage2").attr('src', imageData2); 137 } 138 139 function updateBg2() 140 { 141 $("#wPaint2").wPaint("imageBg", 'images/demo/wPaint.jpg'); 142 } 143 144 </script> 145 </body> 146 </html>