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------用来建立一个虚拟 ...
随机推荐
- Python基础 初识Python
机器码 机器码(machine code),学名机器语言指令,有时也被称为原生码(Native Code),是电脑的CPU可直接解读的数据. 通常意义上来理解的话,机器码就是计算机可以直接执行,并且执 ...
- F5 会话保持
1．什么是会话保持?在大多数电子商务的应用系统或者需要进行用户身份认证的在线系统中,一个客户与服务器经常经过好几次的交互过程才能完成一笔交易或者是一个请求的完成.由于这几次交互过程是密切相关的,服务器 ...
- Label & TextBlock
I always thought it was odd that WPF has both TextBlock and Label. They both are responsible for di ...
- Android vector标签 PathData 画图超详解
SVG是一种矢量图格式,是Scalable Vector Graphics三个单词的首字母缩写.在xml文件中的标签是<vector>,画出的图形可以像一般的图片资源使用,例子如下: &l ...
- C#-异常处理:tyr,catch,finally ---ShinePans
异常处理能够解决诸如一下问题: 数据库连接失败,IO错误,数据溢出,数组下表越界等问题. 总结:我认为在某些easy出错的地方加上 异常处理语句是很明智的选择 finally 是不管怎样都要运行的语 ...
- 关于javaScript注册事件传递参数的浅析
最近这半年作为一个java 程序员,我写的javaScript代码都快比java代码多了,前段时间是给某银行做一个柜员管控系统,在柜员授权这一块功能上,由于柜员的授权需要考虑各方面的因素,比如机构权限 ...
- bzoj 1026 [SCOI2009]windy数 数位dp
1026: [SCOI2009]windy数 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline ...
- Linux中搭建SVNserver
一 下载工具 1. subversion-1.6.17.tar.gz 2. subversion-deps-1.6.17.tar.gz 二 解压两个包: 1.在此之前,我已经创建了一个用户svnroo ...
- Ubuntu 14.04 Android 使用Maven二 创建自己的Mavenproject
依据https://code.google.com/p/maven-android-plugin/wiki/GettingStarted 介绍,有两种方法能够创建Mavenproject. 第一种方法 ...
- 安装jasperwave出错
1.错误描写叙述 2.错误原因 无法下载"com.jasperwave.engine_1.1.0.jar",须要又一次下载 3.解决的方法 将"com.jasperwav ...