我正在使用this tutorial，它适用于Chrome，它会将图像显示为div背景图像
现在我想将该图像保存在特定文件夹中的服务器端...我的示例代码 只需将其复制并保存在.html中并使用chrome打开...然后按键盘的打印屏幕按钮并单击此页面并按Ctrl + V 您将看到图像...现在我希望该图像保存在特定文件夹的服务器端
我的代码
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>HTML5 JavaScript Pasting Image Data in Chrome </title>
<link rel="stylesheet" type="text/css" media="all" href="http://strd6.com/wp-content/themes/twentyeleven/style.css" />
<script type='text/javascript' src='http://strd6.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
</head>
<body >
<div id="page" style="height:1000px">
<script>
(function() {
(function($) {
var defaults;
$.event.fix = (function(originalFix) {
return function(event) {
event = originalFix.apply(this, arguments);
if (event.type.indexOf('copy') === 0 || event.type.indexOf('paste') === 0) {
event.clipboardData = event.originalEvent.clipboardData;
}
return event;
};
})($.event.fix);
defaults = {
callback: $.noop,
matchType: /image.*/
};
return $.fn.pasteImageReader = function(options) {
if (typeof options === "function") {
options = {
callback: options
};
}
options = $.extend({}, defaults, options);
return this.each(function() {
var $this, element;
element = this;
$this = $(this);
return $this.bind('paste', function(event) {
var clipboardData, found;
found = false;
clipboardData = event.clipboardData;
return Array.prototype.forEach.call(clipboardData.types, function(type, i) {
var file, reader;
if (found) {
return;
}
if (type.match(options.matchType) || clipboardData.items[i].type.match(options.matchType)) {
file = clipboardData.items[i].getAsFile();
reader = new FileReader();
reader.onload = function(evt) {
return options.callback.call(element, {
dataURL: evt.target.result,
event: evt,
file: file,
name: file.name
});
};
reader.readAsDataURL(file);
return found = true;
}
});
});
});
};
})(jQuery);
}).call(this);
jQuery("html").pasteImageReader(function(results) {
var dataURL, filename;
filename = results.filename, dataURL = results.dataURL;
return jQuery("#page").css({
backgroundImage: "url(" + dataURL + ")",
backgroundRepeat: "repeat"
});
});
</script>
</div>
</body>
</html>
答案 0 :(得分：1)
您需要将数据发送到服务器，可能需要使用Ajax POST请求。数据可以从dataURL中提取，它是base64编码的图像，前面有一些元数据。
答案 1 :(得分：0)
昨天我正面临这个问题，现在我在Firefox中解决了......
示例代码 index.jsp的
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$('#submit').click(function() {
$.ajax({
type: "POST",
url: "<%= request.getContextPath()%>" + "/ImageCreator",
data: {html: $('#mydiv').find("img").attr('src')},
success: function() {
alert("Image Successfully Uploaded,Now Go Back And Click Submit");
window.close();
window.close();
},
error: function() {
alert("Error Occurred While Uploading Image");
}
});
});
});
</script>
</head>
<body>
<div style="text-align: center;">
<h2>Press Keyboard "Print Screen key" Than Click in the Colored Area and Press Control+V then Click Upload Button</h2>
<!-- <div onclick="createDiv()"> Click Here!</div>
<div onclick="subb();"> Click Value!</div> -->
<Button href="#" id="submit" >Upload</button>
<div contenteditable="" id="mydiv" style=" height: 700px;background-color: #CCCCCC;"></div>
</div>
</body>
</html>
在它中发送ajex请求到servlet名称/ ImageCreator
这是servlet的代码
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.imageio.ImageIO;
import javax.mail.Session;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import util.ImageUtils;
/**
*
* @author Zeeshan Akhter
*/
public class ImageCreator extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
BufferedImage newImg;
HttpSession session = request.getSession(true);
String minedata = request.getParameter("html");
// System.out.println("minedata" + minedata);
newImg = ImageUtils.decodeToImage(minedata.replace("data:image/png;base64,", ""));
String date = "";
Date date1 = new Date();
DateFormat formatter = new SimpleDateFormat("ddMMyyhhmmss");
date = formatter.format(date1);
// File FilePathsdd = new File(FilePaths);
// JOptionPane.showConfirmDialog(null,application.getRealPath(request.getContextPath()+"/js/") );
File dateFolder = new File(((String) session.getAttribute("imagePath")) + "/js/" + date);
if (!dateFolder.exists()) {
dateFolder.mkdir();
dateFolder.setExecutable(true);
dateFolder.setReadable(true);
dateFolder.setWritable(true);
}
String path = dateFolder.getAbsolutePath();
while ((path.contains("\\"))) {
System.out.println("\nPath1=" + path);
path = (path.replace("\\", "/"));
System.out.println("\nPath2=" + path);
}
File Save = new File(path + "/ForexImage.png");
System.out.println("ImagePath=" + Save.getAbsolutePath().replace("\\", "/"));
session.setAttribute("createdFilePath", Save.getAbsolutePath().replace("\\", "/"));
ImageIO.write(newImg, "png", Save);
}
}
答案 2 :(得分：0)
这是类util.ImageUtils
package util;
/**
*
* @author ZeeshanAakhter
*http://latest-tutorial.com
*http://zeeshanakhter.com
*/
import java.io.IOException;
import sun.misc.BASE64Encoder;
import sun.misc.BASE64Decoder;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;
public class ImageUtils {
/**
* Decode string to image
*
* @param imageString The string to decode
* @return decoded image
*/
public static BufferedImage decodeToImage(String imageString) {
BufferedImage image = null;
byte[] imageByte;
try {
BASE64Decoder decoder = new BASE64Decoder();
imageByte = decoder.decodeBuffer(imageString);
ByteArrayInputStream bis = new ByteArrayInputStream(imageByte);
image = ImageIO.read(bis);
bis.close();
} catch (Exception e) {
e.printStackTrace();
}
return image;
}
/**
* Encode image to string
*
* @param image The image to encode
* @param type jpeg, bmp, ...
* @return encoded string
*/
public static String encodeToString(BufferedImage image, String type) {
String imageString = null;
ByteArrayOutputStream bos = new ByteArrayOutputStream();
try {
ImageIO.write(image, type, bos);
byte[] imageBytes = bos.toByteArray();
BASE64Encoder encoder = new BASE64Encoder();
imageString = encoder.encode(imageBytes);
bos.close();
} catch (IOException e) {
e.printStackTrace();
}
return imageString;
}
}