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.pageX;
y = event.touches.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修改限制上传大小
以上就是这次记录的全部内容，如有不足，请指教！
页:
[1]