js插件---画图软件wePaint如何使用（插入背景图片，保存图片，上传图片）

最新推荐文章于 2024-05-08 09:41:46 发布

weixin_34217773

最新推荐文章于 2024-05-08 09:41:46 发布

阅读量5.8k

点赞数

文章标签： 5g ui javascript ViewUI

原文链接：http://www.cnblogs.com/Renyi-Fan/p/9550532.html

版权

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             <

最低0.47元/天解锁文章

weixin_34217773

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js插件---画图软件wePaint如何使用（插入背景图片，保存图片，上传图片）

js插件---画图软件wePaint如何使用（插入背景图片，保存图片，上传图片）一、总结一句话总结：万能的wPaint方法，通过不同的参数执行不同的操作。比如清空画布参数传"clear"，获取图片数据参数是"image"等等1、wePaint如何保存图片？a、找到canvas对象，通过wPaint("image")方法获取 image数据b、将获取的image数据赋值给一...
复制链接

扫一扫