Question

所以我能够找到这个greate jscript：http://joelb.me/blog/2011/code-snippet-accessing-clipboard-images-with-javascript/

java非常简单（全部归功于作者）

// We start by checking if the browser supports the
// Clipboard object. If not, we need to create a
// contenteditable element that catches all pasted data
if (!window.Clipboard) {
 var pasteCatcher = document.createElement("div");

 // Firefox allows images to be pasted into contenteditable elements
 pasteCatcher.setAttribute("contenteditable", "");

 // We can hide the element and append it to the body,
 pasteCatcher.style.opacity = 0;
 document.body.appendChild(pasteCatcher);

 // as long as we make sure it is always in focus
 pasteCatcher.focus();
 document.addEventListener("click", function() { pasteCatcher.focus(); });
} 
// Add the paste event listener
window.addEventListener("paste", pasteHandler);

/* Handle paste events */
function pasteHandler(e) {
 // We need to check if event.clipboardData is supported (Chrome)
if (e.clipboardData) {
  // Get the items from the clipboard
  var items = e.clipboardData.items;
  if (items) {
     // Loop through all items, looking for any kind of image
     for (var i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
           // We need to represent the image as a file,
           var blob = items[i].getAsFile();
           // and use a URL or webkitURL (whichever is available to the browser)
           // to create a temporary URL to the object
           var URLObj = window.URL || window.webkitURL;
           var source = URLObj.createObjectURL(blob);

           // The URL can then be used as the source of an image
           createImage(source);
        }
     }
  }
// If we can't handle clipboard data directly (Firefox),
// we need to read what was pasted from the contenteditable element
} else {
  // This is a cheap trick to make sure we read the data
  // AFTER it has been inserted.
  setTimeout(checkInput, 1);

} }

/* Parse the input in the paste catcher element */
function checkInput() {
 // Store the pasted content in a variable
 var child = pasteCatcher.childNodes[0];

 // Clear the inner html to make sure we're always
 // getting the latest inserted content
 pasteCatcher.innerHTML = "";

 if (child) {
  // If the user pastes an image, the src attribute
  // will represent the image as a base64 encoded string.
  if (child.tagName === "IMG") {
     createImage(child.src);
  }

} }

  /* Creates a new image from a given source */
   function createImage(source) {
 var pastedImage = new Image();
 pastedImage.onload = function() {
    // You now have the image!
 }
   pastedImage.src = source;
}

我得到data:image/png;base64,iVBORw0KG

我对每个人的问题是如何将其粘贴回文本框多行或文本区域？或者用户可以看到的任何内容？

谢谢！

Answer 1

该示例已经有效，它应该显示图像，但不透明度设置为0，只需将其更改为1，它将显示图像。您始终可以在所需的位置预定义图像，并设置其源。您的用户应该能够看到它。

asp / javascript将图像粘贴到文本框中

1 个答案: