Currently, only the higher version of Chrome browser supports direct pasting. Other browsers cannot paste so far. However, the image taken by Firefox and IE11 browsers can paste screenshots in editable divs is also base64 bit and Chrome uses clipboardData. However, in Firefox and IE11 browsers, it is not possible to directly obtain base64 data of images using clipboardData. It comes with its own direct img data.
Complete example:
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>Use clipboardData to implement screenshot and paste functions in web pages</title><style type="text/css"> .box{ width:500px; height:300px; border:1px solid #ddd; } .box img{max-width:480px; max-height: 100%; text-align: center;}</style></head><body><div contenteditable="true" id="testInput"></div><script type="text/javascript">(function(){ var imgReader = function( item ){ var blob = item.getAsFile(), reader = new FileReader(); reader.onload = function( e ){ var img = new Image(); img.src = e.target.result; console.log(img); document.getElementById('testInput').appendChild( img ); }; reader.readAsDataURL( blob ); }; document.getElementById( 'testInput' ).addEventListener( 'paste', function( e ){ //window.clipboardData.getData("Text") Get pasted content under e.clipboardData.getData("text/plain") Firefox Get pasted content under Google //alert(e.clipboardData.getData("text/plain") ) var clipboardData = e.clipboardData,//Google i = 0, items, item, types; console.log('0') if( clipboardData ){ console.log('1') items = clipboardData.items; if( !items ){ console.log(2) return; } console.log(3) item = items[0]; types = clipboardData.types || []; for( ; i < types.length; i++ ){ if( types[i] === 'Files' ){ item = items[i]; break; } } if( item && item.kind === 'file' && item.type.match(/^image///i) ){ imgReader( item ); } } },false);})(); </script></script></body></html>Example 2:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="div" contenteditable="true"></div> <script> var div = document.getElementById('div'); div.addEventListener('paste', function(e) { if(e.clipboardData) { for(var i = 0; i < e.clipboardData.items.length; i++) { var c = e.clipboardData.items[i]; var f = c.getAsFile(); var reader = new FileReader(); reader.onload = function(e) { div.innerHTML += '<img src="' + e.target.result + '">'; } reader.readAsDataURL(f); } } }); </script></body></html>Implementation method:
Method 1: In Chrome browser, you can directly obtain screenshot image data through clipboardData. You can use ajax to pass the data to the background, and then return the image address with the domain name by the background development.
Method 2: Since the image data cannot be obtained directly in browsers such as Firefox, you can obtain the img data in the div as base64 url data when pasting, and then use ajax as the same method.
Method 3: When clicking on publishing or saving messages, you can obtain the data of img in the div as base64 url data, and then use ajax at the same time. If there are multiple pictures, loop, or when clicking on save and publishing, the back-end development process will be done, and the returned display information will be processed directly. In this way, we do not need to replace the base64 url with the address with the domain name returned by the back-end in the div.
Method 4: When pasting in the div, a pop-up layer pops up, and then a preview of the picture with screenshots in the pop-up layer can confirm the upload button. Click the upload button to go to Ajax to upload the picture in the same way as the same method