Chrome has many humanized APIs, such as dragging and dropping, such as images that can be converted into base64, etc.;
For example, you can directly paste pictures in the reply above Zhihu, so there is no need to manually click the image upload button, select the image, confirm the upload, etc.; Zhihu reference address:Open
Let the editor support word copy and paste, where the picture will be converted to base64 encoding. If the static page is opened remotely, the picture will not be pasted in when pasting the word document, because the remote address cannot access the absolute path of the local disk. If the following code is saved as a static interface to open, then the pictures in word can be seen and will be converted to base64 encoding;
The editor supports screenshot pasting;
Let the editor support direct dragging of pictures, and directly dragging can add pictures. The function is more powerful, and the pictures are also base64 encoding;
If used, the new Edit() parameter is an editable element, such as a div or iframe element with a contenteditable attribute, etc.:
<html>
<head></head>
<body>
<script src="/jquery/1.9.0/"></script>
<div contenteditable="true" style="width:400px;height:400px;border:1px solid #f00">
</div>
<script>
function Edit( editEl ) {
editEl = $(editEl);
$(editEl).bind("paste", clipFn);
function clipFn(ev) {
//Put the img in the clipboard through canvas to base64 string; var canvas = ("canvas");
var context = ("2d");
//When copying from word, you will get text/html data; var html = $(("text/html"));
("img").each(function () {
var img = ("img");
var src = $(this).attr("src"); //.replace(/\\/gi,"\/");
var _this = this;
= src;
= function () {
= ;
= ;
(img, 0, 0, , );
var dataBase64 = ("image/png").replace("image/png", "image/octet-stream");
$("img").each(function (index, el) {
//Match the picture; if ($(this).attr("src").replace(/[\/\\]/g,"") === (/[\/\\]/g,"")) {
= dataBase64;
};
});
= function() {
("Image loading failed");
};
= null;
};
});
//If you use screenshots or copying pictures, you will get an image with type "imgage"; var ele = ;
for (var i = 0; i < ; ++i) {
if ( ele[i].kind == 'file' && ele[i].('image/') !== -1 ) {
var blob = ele[i].getAsFile();
readBlobAsDataURL(blob, function( base64 ) {
var img= ('img');
('src', base64);
(img);;
});
//Block default events and avoid repeated additions; ();
};
};
};
//Binding drag event //Give a response ("dragover", function() {
return false;
});
//Trigger event response ("drop", function(ev) {
loadImage( [0] , function( result ) {
( "<img src="+result+" />" );
});
return false;
});
// Load image file (url path) function loadImage(src, callback){
// Filter out files of non-image type if(!(/image.*/)){
if(){
("The file type selected is not a picture: ", );
} else {
("Only select image files");
}
return;
}
// Create a FileReader object and call the render function to complete the rendering. var reader = new FileReader();
// Bind the load event automatic callback function = function(e){
// Call the previous render function callback();
};
// Read file content (src);
};
function readBlobAsDataURL(blob, callback) {
var a = new FileReader();
= function(e) {callback();};
(blob);
};
};
</script>
<script>
new Edit("#edit");
</script>
</body>
</html>
Many online editors have single support for pictures, and they will consider IE6, IE7, ff, chrome, and various compatibility issues;
This solution is suitable for browsers based on the chrome kernel. FF compatibility is not processed, because all image data is based on base64, and the image is not uploaded, and the image becomes a string. However, this has a disadvantage that the data submitted will be relatively large every time;
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.