H5神器之canvas应用——网页修改保存图片
因为最近项目上的要求，需要在页面中可以对一张图片进行涂改和添加文字，然后再保存到(服务器)本地，因为也是第一次接触这方面的，然后爬网页啊爬网页，之后发现了一款adobe开发的一款插件，适合 Anroid Ios 和Web的调用
传送门 ：感谢 翩翩 大神 http://www.cnblogs.com/hiflora/p/4267705.html
发现这款插件非常的炫酷，功能也还是蛮强大的。但是万万没想到！！！当时也没有注意大神的使用说明：
1，需要在线注册账号，申请apikey，地址：https://creativesdk.adobe.com/docs/web，这个apikey在代码调用时需要。这里也有详细的api文档，其他功能请参考文档说明，不过文档是英文的。
2，要编辑的图片必须有固定的地址，可以被网络访问到。
因为项目处理的图片我觉得应该不会有啥固定的地址吧，可以被网络访问到，我想更加不是现实的吧，到时候项目中保存的图片应该都是在本地的服务器上面，到时候有可能用的网络是在局域网用的，要访问这张图片应该是很难的吧，最后放弃了！！
但是我觉得这个插件非常的炫酷，而且我觉得应该是蛮实用的，虽然点开页面反应时间有点长了点，但是人家功能叼啊。
好了废话不多说了，进入主题。
在扯几句，之后跟同事聊天的时候说起这件事，然后同事说可以用H5的canvas，突然灵光一闪，因为以前看过这个介绍、但是没有用过，觉得想想可行，于是就尝试这用canvas了。
具体的canvas的他自带的属性我就不一一介绍了 传送门 http://www.w3school.com.cn/tags/html_ref_canvas.asp
上代码HTML部分代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>demo</title>
</head>
<body>
<div>
<canvas id="canvas" ></canvas>
<img src="11.png" id="showPic" onclick="getPic()" >
</div>
<input type="text" name="fillWords" id="fillWords"> <button onclick="addWords()">文字添加</button>
<button onclick="cleanPic()">清空</button>
<button onclick="savePic()">保存</button>
</body>
</html>
下面是js代码 感谢 http://www.oschina.net/code/snippet_221942_46198
<script type="text/javascript">
//全局变量
var x_words, y_words; //用于获得鼠标点击的坐标 用于插入文字
var flag = false;
var canvas, ctxl;
canvas = document.getElementById('canvas');
canvas.addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('mousedown', onMouseDown, false);
canvas.addEventListener('mouseup', onMouseUp, false);
canvas.addEventListener('touchstart', onMouseDown, false);
canvas.addEventListener('touchmove', onMouseMove, false);
canvas.addEventListener('touchend', onMouseUp, false)
canvas.height = 400;
canvas.width = 600;
ctx = canvas.getContext('2d');
ctx.lineWidth = 3.0; // 设置线宽
ctx.strokeStyle = "#CC0000"; // 设置线的颜色
function onMouseMove(evt) {
evt.preventDefault();
if (flag) {
var p = pos(evt);
ctx.lineTo(p.x, p.y);
x_words = p.x;
y_words = p.y;
ctx.lineWidth = 1.0; // 设置线宽
ctx.shadowColor = "#CC0000";
ctx.shadowBlur = 1;
//ctx.shadowOffsetX = 6;
ctx.stroke();
}
}
function onMouseDown(evt) {
evt.preventDefault();
ctx.beginPath();
var p = pos(evt);
ctx.moveTo(p.x, p.y);
flag = true;
}
function onMouseUp(evt) {
evt.preventDefault();
flag = false;
}
function cleanPic() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function pos(event) {
var x, y;
if (isTouch(event)) {
x = event.touches[0].pageX;
y = event.touches[0].pageY;
} else {
x = event.layerX;
y = event.layerY;
}
return {x: x, y: y};
}
function isTouch(event) {
var type = event.type;
if (type.indexOf('touch') >= 0) {
return true;
} else {
return false;
}
}
//添加文字
function addWords() {
var words = document.getElementById("fillWords").value;
ctx.fillStyle = "#CC0000";
ctx.font = "20px 微软雅黑";
ctx.fillText(words, x_words, y_words); // 文字
}
function savePic() {
var pic = document.getElementById('showPic');
// 得到了需要保存的 相关图的信息 格式为:data:image/png;base64,xxxx" 有效的为xxxx部分
var strDateUrl = canvas.toDataURL("image/png");
pic.src = strDateUrl;
}
function getPic() {
var pic = document.getElementById('showPic');
// pic.crossOrigin = "anonymous";
ctx.drawImage(pic, 0, 0, 600, 400);
}
</script>
运行的效果图如下：
本来，在这期间也遇到了一个问题： 因为我原本的打算是在 有背景的前提下面对于画面的更改，因为需求就是对图片的更改，之后保存么，所以目的是更改图片但是，当我点击图片的时候，虽然画布背景改变了，也可以添加文字和绘制一些乱七八糟的线条，但是在保存这图片的时候报了下面的错误：
经过网上查询 发现是图片跨域的问题,这个名词 我以前都没听过 :( 这次又学习到了新知识 我查看的资料：传送门 感谢这位同学！
但是，旧的问题解决了，新的问题又来了，当我为图片添加 crossOrigin = "anonymous"; 属性的时候，我在服务器上面是可有用的，也可以运行，但是把所以代码都提取出，就不可以运行了。就会报上面的错。
下面顺便也把保存图片到本地 的方法写出来吧， 经过post提交之后，后台接受到提交过百的Base64值，转换成二进制之后，写到流文件中
package com.sl.apps.acs.services.server; import com.cnblogs.yjmyzz.utils.FileUtil;
import org.springframework.stereotype.Service;
import sun.misc.BASE64Decoder; import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException; /**
* @author xueyuan
* @dater 2016-11-9 0009.
*/
@Service
public class Base64ToImageService { public void Base64ToImageService(String imgStr) {
String currentDir = FileUtil.currentWorkDir;
String path = "images/1.jpg";
saveImage(decode(imgStr.substring(22)),currentDir+path);
} public static byte[] decode(String s) {
BASE64Decoder decoder = new BASE64Decoder();
byte[] bytes = null;
try {
bytes = decoder.decodeBuffer(s);
} catch (IOException e) {
e.printStackTrace();
}
return bytes;
} public void saveImage(byte[] imageBytes,String path){
File file=new File(path);
FileOutputStream outputStream=null;
try {
outputStream=new FileOutputStream(file);
outputStream.write(imageBytes);
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} finally{
closeSteam(outputStream);
}
} public void closeSteam(FileOutputStream outputStream){
if(outputStream!=null){
try {
outputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
} }
在解决保存的时候又发现了新的问题，因为我用的是jetty为容器的，没有设置maxFormContentSize 这个属性，因为post的不能超过2M的数据，所以要把这个属性设置为你需要的大小 或者为-1，即不限制大小：
感谢这位同学： jetty修改限制上传大小
以上就是这次记录的全部内容，如有不足，请指教！
H5神器之canvas应用——网页修改保存图片的更多相关文章
- [转帖]APP逆向神器之Frida【Android初级篇】
APP逆向神器之Frida[Android初级篇] https://juejin.im/post/5d25a543e51d455d6d5358ab 说到逆向APP,很多人首先想到的都是反编译,但是单看 ...
- SSH客户端神器之 MobaXterm
SSH客户端神器之 MobaXterm 由于需要连接远程 Linux 服务器,早期使用过 Putty,SecureCRT,后面主要使用 Xshell. 自从接触了 MobaXterm之后,个人感觉比 ...
- IntelliJ IDEA 在网页修改数据，但是在浏览器刷新的时候，不能读取到修改之后的数据
使用IntelliJ IDEA 在网页修改数据,但是在浏览器刷新的时候,不能读取到修改之后的数据? 解决办法:tomcat配置中,On frame deactivation属性选择Update cla ...
- ORACLE恢复神器之ODU/AUL/DUL
分享ORACLE数据库恢复神器之ODU.DUL和AUL工具. ODU:ORACLE DATABASE UNLOADER DUL:DATA UNLOADER AUL:也称MyDUL 关于三种工具说明: ...
- 基于HTML5 Canvas的网页画板实现教程
HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...
- ESP8266 HTTP 项目（2）HTTP网页修改WIFI连接，上电自动连接上次的WIFI。
网页 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf ...
- H5上传图片之canvas
H5上传图片之canvas,使用canvas处理压缩图片再上传 html代码: <form action="" method="post"> < ...
- 利用canvas将网页元素生成图片并保存在本地
利用canvas将网页元素生成图片并保存在本地 首先引入三个文件: 1.<script type="text/javascript" src="js/html2ca ...
- python三大神器之virtualenv pip, virtualenv, fabric通称为pythoner的三大神器。
python三大神器之virtualenv pip, virtualenv, fabric通称为pythoner的三大神器. virtualenv virtualenv------用来建立一个虚拟 ...
随机推荐
- 51Nod 1405 树的距离之和 (树dp)
题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1405 中文题面不解释了,两次dfs,第一次自下向上,第二次自上 ...
- LIS (最长上升子序列)
LIS两种写法 O(n^2) dp[i]表示以a[i]结尾的为LIS长度 #include <algorithm> #include <iostream> #include & ...
- CSS学习篇核心之——盒子模型
概述 关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识. 盒子模型 元素框的最内部分是实际的内容(element),直接包围内容的是内边距 ...
- Unity3d:编辑器中运行正常，发布后的exe提示找不到文件
解决方案1:查看文件路径拼写方式,如果是用“+”拼接的,请改用System.IO.Path.Combine()方式拼接.经过测试,两种拼接方式打印出来的路径是一样的,但为什么 加号 的方式拼接unit ...
- C#中的Collection 1
Collection定义 Collection是个关于一些变量的集合,按功能可分为Lists,Dictionaries,Sets三个大类. Lists:是一个有序的集合,支持index look up ...
- 无责任Windows Azure SDK .NET开发入门篇三[使用Azure AD 管理用户信息--3.4 Edit修改用户信息]
3.4 Edit修改用户信息 我们用FormCollection简化了表单提交,非常方便的进行用户信息修改. [HttpPost, Authorize] public async Task<Ac ...
- 无责任Windows Azure SDK .NET开发入门篇三[使用Azure AD 管理用户信息--3.3 Details用户详细信息]
3.3 Details用户详细信息 用户详细信息是通过objectId获取.代码如下 public async Task<ActionResult> Details(string obje ...
- （4）html表格
本节解说 :html的表格 表格: *<table></table> 标签定义 HTML 表格. *简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 t ...
- linux-用户建立及权限分配
1.建立用户 useradd –d /usr/test -m test 此命令创建了一个用户test,用户主目录为/usr/test 2.设置用户密码 .修改自己的密码 passwd ,需要输入旧 ...
- UIImage imageNamed 与 imageWithContentsOfFile的差别
[UIImage imageNamed:]仅仅适合与UI界面中的贴图的读取,较大的资源文件应该尽量避免使用 用UIImage载入本地图像最经常使用的是以下三种: 1.用imageNamed方法 [UI ...