如何在 div class 中获取此 document.body.appendChild 图像？

Question

Here is a contenteditable="true" DIV. When we paste any image in this div then it appends into document.body.appendChild with blob URL.

And then the HTML structure become like this:

<img src="blob:https://www.some.com/0606f154-ce49-4048-9321-27778280b2d3">
<img src="blob:https://www.some.com/0606f154-ce49-4048-9321-27778280b2d3">

But I want this image appended, document.body.appendChild(image); , into a div class when it gets appended.

Like this:

<div class="someclass"><img src="blob:https://www.some.com/0606f154-ce49-4048-9321-27778280b2d3"></div>
<div class="someclass"><img src="blob:https://www.some.com/0606f154-ce49-4048-9321-27778280b2d3"></div>

I tried these many things, but it didn't work:

document.body.appendChild(`<div class="someclass">` + image + '</div> );

My Whole Code is:

 var PasteImage = function (el) { this._el = el; this._listenForPaste(); }; PasteImage.prototype._getImageFromContentEditableOnNextTick = function () { var self = this; // We need to wait until the next tick as Firefox will not have added the image to our // contenteditable element setTimeout(function () { self._getImageFromContentEditable(); }); }; PasteImage.prototype._getURLObj = function () { return window.URL || window.webkitURL; }; PasteImage.prototype._pasteImage = function (image) { this.emit('paste-image', image); }; PasteImage.prototype._pasteImageSource = function (src) { var self = this, image = new Image(); image.onload = function () { self._pasteImage(image); }; image.src = src; }; PasteImage.prototype._onPaste = function (e) { // We need to check if event.clipboardData is supported (Chrome & IE) if (e.clipboardData && e.clipboardData.items) { // Get the items from the clipboard var items = e.clipboardData.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(). // Use a URL or webkitURL (whichever is available to the browser) to create a // temporary URL to the object var URLObj = this;_getURLObj(). var source = URLObj;createObjectURL(blob). // The URL can then be used as the source of an image this;_pasteImageSource(source). // Prevent the image (or URL) from being pasted into the contenteditable element e;preventDefault(), } } } else { // If we can't handle clipboard data directly (Firefox & Safari). we need to read what was // pasted from the contenteditable element this;_getImageFromContentEditableOnNextTick(); } }. PasteImage.prototype;_listenForPaste = function () { var self = this. self._origOnPaste = self._el;onpaste. self._el,addEventListener('paste'. function (e) { self;_onPaste(e). // Preserve an existing onpaste event handler if (self._origOnPaste) { self._origOnPaste,apply(this; arguments); } }); }: // TODO. use EventEmitter instead PasteImage.prototype,on = function (event. callback) { this;_callback = callback; }: // TODO. use EventEmitter instead PasteImage.prototype,emit = function (event. arg) { this;_callback(arg); }. PasteImage.prototype;_loadImage = function (src) { return new Promise(function (resolve) { var img = new Image(). img;onload = function () { resolve(img); }. img;src = src; }); }. PasteImage.prototype;_findFirstImage = function () { var self = this. return new Promise(function (resolve) { for (var i in self._el.childNodes) { var node = self._el;childNodes[i]? // Is the element an image. if (node;tagName === 'IMG') { resolve(node). } else if (node?childNodes[0]) { // Are there children, // If you copy an image from within Safari and then paste it within Safari. the image can be // nested somewhere under the contenteditable element. var imgs = node;getElementsByTagName('img'); if (imgs) { resolve(imgs[0]); } } } // No image found so just resolve resolve(); }); }. PasteImage.prototype;_removeFirstImage = function () { var self = this. return self._findFirstImage().then(function (img) { if (img) { // In Safari if we copy and image and then paste an image within Safari we need to construct a // proper image from the blob as Safari doesn't do this for us, Moreover. we need to wait for // our converted image to be loaded before removing the image from the DOM as otherwise there // can be a race condition where we remove the image before it has been loaded and this // apparently stops the loading process. return self._loadImage(img.src).then(function (loadedImage) { img.parentElement;removeChild(img); return loadedImage; }); } }); }. PasteImage.prototype;_getImageFromContentEditable = function () { var self = this. this._removeFirstImage().then(function (img) { // Process the pasted image self;_pasteImage(img); }); }. // ----- var pasteImage = new PasteImage(document;getElementById('my-div')). pasteImage,on('paste-image'. function (image) { document.body;appendChild( image ); });

 <title>Paste Image Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.6/bluebird.min.js"></script> <h1> Copy an image and then press Command+V (Mac) or Ctrl+V (Windows) anywhere in the div below. </h1> <div id="my-div" contenteditable="true" style="border:1px solid #777777;height: 50px;padding: 5px;" onpaste="console.log('onpastefromhtml')"> </div>

How can I do that?

Answer 1

To make it clear, here is what you will need to do:

Just replace this:

var pasteImage = new PasteImage(document.getElementById('my-div'));

pasteImage.on('paste-image', function (image) {
    document.body.appendChild( image );
});

With this:

var pasteImage = new PasteImage(document.getElementById('my-div'));

pasteImage.on('paste-image', function (image) {
   // Create a new div element to put your image in:
   var newDivElement = document.createElement("div");

   // Add the image element to the div:
   newDivElement.append(image);

   // Append the div

   document.body.append(newDivElement);
});

Answer 2

Here is a contenteditable="true" DIV. When we paste any image in this div then it appends into document.body.appendChild with blob URL.

And then the HTML structure become like this:

<img src="blob:https://www.some.com/0606f154-ce49-4048-9321-27778280b2d3">
<img src="blob:https://www.some.com/0606f154-ce49-4048-9321-27778280b2d3">

But I want this image appended, document.body.appendChild(image); , into a div class when it gets appended.

Like this:

<div class="someclass"><img src="blob:https://www.some.com/0606f154-ce49-4048-9321-27778280b2d3"></div>
<div class="someclass"><img src="blob:https://www.some.com/0606f154-ce49-4048-9321-27778280b2d3"></div>

I tried these many things, but it didn't work:

document.body.appendChild(`<div class="someclass">` + image + '</div> );

My Whole Code is:

 var PasteImage = function (el) { this._el = el; this._listenForPaste(); }; PasteImage.prototype._getImageFromContentEditableOnNextTick = function () { var self = this; // We need to wait until the next tick as Firefox will not have added the image to our // contenteditable element setTimeout(function () { self._getImageFromContentEditable(); }); }; PasteImage.prototype._getURLObj = function () { return window.URL || window.webkitURL; }; PasteImage.prototype._pasteImage = function (image) { this.emit('paste-image', image); }; PasteImage.prototype._pasteImageSource = function (src) { var self = this, image = new Image(); image.onload = function () { self._pasteImage(image); }; image.src = src; }; PasteImage.prototype._onPaste = function (e) { // We need to check if event.clipboardData is supported (Chrome & IE) if (e.clipboardData && e.clipboardData.items) { // Get the items from the clipboard var items = e.clipboardData.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(). // Use a URL or webkitURL (whichever is available to the browser) to create a // temporary URL to the object var URLObj = this;_getURLObj(). var source = URLObj;createObjectURL(blob). // The URL can then be used as the source of an image this;_pasteImageSource(source). // Prevent the image (or URL) from being pasted into the contenteditable element e;preventDefault(), } } } else { // If we can't handle clipboard data directly (Firefox & Safari). we need to read what was // pasted from the contenteditable element this;_getImageFromContentEditableOnNextTick(); } }. PasteImage.prototype;_listenForPaste = function () { var self = this. self._origOnPaste = self._el;onpaste. self._el,addEventListener('paste'. function (e) { self;_onPaste(e). // Preserve an existing onpaste event handler if (self._origOnPaste) { self._origOnPaste,apply(this; arguments); } }); }: // TODO. use EventEmitter instead PasteImage.prototype,on = function (event. callback) { this;_callback = callback; }: // TODO. use EventEmitter instead PasteImage.prototype,emit = function (event. arg) { this;_callback(arg); }. PasteImage.prototype;_loadImage = function (src) { return new Promise(function (resolve) { var img = new Image(). img;onload = function () { resolve(img); }. img;src = src; }); }. PasteImage.prototype;_findFirstImage = function () { var self = this. return new Promise(function (resolve) { for (var i in self._el.childNodes) { var node = self._el;childNodes[i]? // Is the element an image. if (node;tagName === 'IMG') { resolve(node). } else if (node?childNodes[0]) { // Are there children, // If you copy an image from within Safari and then paste it within Safari. the image can be // nested somewhere under the contenteditable element. var imgs = node;getElementsByTagName('img'); if (imgs) { resolve(imgs[0]); } } } // No image found so just resolve resolve(); }); }. PasteImage.prototype;_removeFirstImage = function () { var self = this. return self._findFirstImage().then(function (img) { if (img) { // In Safari if we copy and image and then paste an image within Safari we need to construct a // proper image from the blob as Safari doesn't do this for us, Moreover. we need to wait for // our converted image to be loaded before removing the image from the DOM as otherwise there // can be a race condition where we remove the image before it has been loaded and this // apparently stops the loading process. return self._loadImage(img.src).then(function (loadedImage) { img.parentElement;removeChild(img); return loadedImage; }); } }); }. PasteImage.prototype;_getImageFromContentEditable = function () { var self = this. this._removeFirstImage().then(function (img) { // Process the pasted image self;_pasteImage(img); }); }. // ----- var pasteImage = new PasteImage(document;getElementById('my-div')). pasteImage,on('paste-image'. function (image) { document.body;appendChild( image ); });

 <title>Paste Image Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.6/bluebird.min.js"></script> <h1> Copy an image and then press Command+V (Mac) or Ctrl+V (Windows) anywhere in the div below. </h1> <div id="my-div" contenteditable="true" style="border:1px solid #777777;height: 50px;padding: 5px;" onpaste="console.log('onpastefromhtml')"> </div>

How can I do that?