1

我正在使用本教程，它适用于 chrome，它向我显示了一个图像作为 div 背景图像

现在我想将该图像保存在服务器端的特定文件夹中...我的示例代码只需复制并保存在 .html 中并使用 chrome 打开...然后按键盘的 printscreen 按钮并单击此页面并按 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>
4

3 回答 3

1

您需要将数据发送到服务器，可能使用 Ajax POST 请求。数据可以从 dataURL 中提取，它是一个 base64 编码的图像，前面有一些元数据。

于 2013-04-02T08:38:43.273 回答
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>

在它将ajax请求发送到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);

            }


        }
于 2013-04-03T12:21:44.977 回答
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;
    }
}
于 2014-02-03T11:56:27.270 回答