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------用来建立一个虚拟 ...
随机推荐
- How to create custom methods for use in spring security expression language annotations
From:http://stackoverflow.com/questions/6632982/how-to-create-custom-methods-for-use-in-spring-secur ...
- asp获取勾选checkbox的值
Dim str_select str_select = CStr(request.Form("c_name")) c_name是checkbox的name
- tab栏切换的特殊效果（类似网易的登陆栏效果）
代码显示效果如上图所示: 需求说明: 在实际需求中,会遇到这样的情况:不仅是要展示选项卡的内容,而且还有可能在选项卡中需求顾客填写相关内容,而这些内容是顾客如果想了解更深层次的,就会继续填写右边的内容 ...
- cocos2d-x 二进制文件的读写
转自:http://blog.csdn.net/wolfking_2009/article/details/10616069 cocos2d-x里面的二进制文件读取的方法是有的,作者对方法封装了下,将 ...
- Introduction into ISO 27145 WWH-OBD
全球统一的重型发动机的车载诊断系统(WWH-OBD) ISO/PAS 27145 is intended to become the single communication standard for ...
- 浅析jQuery框架与构造对象
这是一些分析jQuery框架的文字 面向的读者应具备以下要求 1.非常熟悉HTML 2.非常熟悉javascript语法知识 3.熟悉javascript面向对象方面的知识 4.熟练使用jQue ...
- QML学习笔记之二
//必须要导入,否则以下元素将无效 import QtQuick 1.1 //对象一:矩形Rectangle Rectangle { width: 798 height: 111 //整个Rectan ...
- java 验证码图片处理类，为验证码识别做准备
/* * To change this template, choose Tools | Templates * and open the template in the editor. */pack ...
- iOS 在类实现定义中声明成员变量的怪异方式
WebGL 规范(WebGL Specification) 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&quo ...
- iOS系统控件显示中文
App中使用系统控件,一般默认会显示英文,即便系统的语言环境设置的是简体中文.这需要在App的工程中加入中文支持,这样在中文的系统环境下,调用的系统控件,比如“返回”而不是“Back”.步骤如下: 为 ...