博客园随笔实现直接粘贴图片
博客园不能直接粘贴复制的图片确实很让人恼火,最近为了解决这个问题尝试了不少方法,感觉还是这个最舒服。
来自这位大佬的博客文章。
https://www.cnblogs.com/Gyoung/p/4133151.html
复制图片后Ctrl+V粘贴,不要用右键。(副作用是博客可能稍微比原先卡一些。)
Tip: 如果发现有代码在博客底部自己显示出来,解决方式是把[Httppost]后的代码全部删掉。这一块的作用是规范储存图片url,删去后粘贴的图片url会变成一堆base64组成的庞大数据....但是对粘贴功能没有任何影响。
我在这也贴出代码。
全部粘贴在支持js的侧边栏代码处就可以了。
<div id="imgDiv" style="border: 1px solid darkblue"> CTRL+V即可实现粘贴 </div> <script type="text/javascript"> function doPaste() { pasterTool.paste(); } var Config = { Paths: {}, isMac: false, Resources: null }; Config.Resources = { makeImage: '/Home/PasteImage', }; var State = { isPasting: false, pasterAdded: false, pasterReady: false, pasteComplete: false, pasteId: 0 }; var pasteCount = 0; function isUrl(a) { var b = /(ftp|http|https):\/\/(\w+:{0,1}\w*@@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@@!\-\/]))?/; return b.test(a); }; var pasterTool = { data: "", mode: 0, processAsHtml: function (b) { var a = b.clipboardData.getData("text/html"); if (a) { $("#pasteCapture").html(a); if ($("#pasteCapture img").length) { pasterTool.data = $("#pasteCapture img:first").attr("src"); pasterTool.mode = 2; pasterTool.process(); return true; } else { if ($("#pasteCapture a").length) { pasterTool.data = $("#pasteCapture a:first").attr("href"); pasterTool.mode = 2; pasterTool.process(); return true; } } } return false; }, processAsText: function (b) { var a = b.clipboardData.getData("text/plain"); if (a) { if (isUrl(a)) { pasterTool.data = a; pasterTool.mode = 2; pasterTool.process(); return true; } } return false; }, checkEditableArea: function () { $("#pasteCapture").html(""); (function() { var e = null; var c = 50; var d = 500; var b = function() { clearInterval(e); $("#pasteCapture").attr("contenteditable", false); $("#pasteCapture").blur(); $("#pasteCapture").attr("contenteditable", true); }; var a = function() { if ($("#pasteCapture").html().length > 0) { b(); if ($("#pasteCapture img").length) { var h = $("#pasteCapture img:first").attr("src"); var g = "data"; var f = "file"; var i = "webkit-fake-url"; if (h.substring(0, g.length) === g) { pasterTool.data = h.substr(h.indexOf(",") + 1); pasterTool.mode = 1; pasterTool.process(); } else { if (h.substring(0, f.length) === f) { State.isPasting = false; } else { if (h.substring(0, i.length) === i) { State.isPasting = false; } else { pasterTool.data = h; pasterTool.mode = 2; pasterTool.process(); } } } } else { if (isUrl($("#pasteCapture").html())) { pasterTool.data = $("#pasteCapture").html(); pasterTool.mode = 2; pasterTool.process(); } else { State.isPasting = false; } } } else { d -= c; if (d <= 0) { b(); State.isPasting = false; } } }; e = setInterval(a, c); })(); }, paste: function (d) { pasteCount--; if (State.isPasting) { return; } State.isPasting = true; d = d.originalEvent; if (d&&d.clipboardData) { if (d.clipboardData.items) { if (d.clipboardData.items.length == 0) { State.isPasting = false; return; } for (var b = 0; b < d.clipboardData.items.length; b++) { var c = d.clipboardData.items[b]; if (c.type == "image/png") { pasterTool.mode = 1; var a = new FileReader(); a.onloadend = function () { pasterTool.data = this.result.substr(this.result.indexOf(",") + 1); pasterTool.process(); }; a.readAsDataURL(c.getAsFile()); break; } else { if (c.type == "text/html") { if (pasterTool.processAsHtml(d)) { State.isPasting = false; break; } else { State.isPasting = false; } } else { if (c.type == "text/plain") { if (pasterTool.processAsText(d)) { State.isPasting = false; break; } else { State.isPasting = false; } } else { State.isPasting = false; } } } } } else { if (!(pasterTool.processAsHtml(d) || pasterTool.processAsText(d))) { pasterTool.checkEditableArea(); } } } else { pasterTool.checkEditableArea(); } }, process: function () { State.isPasting = true; var a = Config.Resources.makeImage; $.post(a, pasterTool.data, function(b) { State.isPasting = false; onPasteComplete(b); }); } }; function onPasteComplete(data) { var dat = data; $("#imgDiv").append("<input type='image' src='"+data+"'/>"); } function focusPasteArea() { $("#pasteCapture").focus(); } $(document).ready(function () { $("<div/>").attr({ "id": "pasteCapture", "contenteditable": "true", "_moz_resizing": "false" }).css({ "position": "absolute", "height": "1", "width": "0", "top": "-9999", "left": "-9999", "outline": "0", "overflow": "auto", "opacity": "0", "z-index": "-9999" }).prependTo("body"); $("body").bind("paste", pasterTool.paste); focusPasteArea(); $(document).bind("keydown", "ctrl+v", focusPasteArea); }); </script> [HttpPost] public ActionResult PasteImage(HttpPostedFileBase upload) { var fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + ".png"; var filePhysicalPath = Server.MapPath("~/upload/" + fileName);//我把它保存在网站根目录的 upload 文件夹 var data1 = Request.Form.ToString(); var data = data1.Replace("%2f", "/").Replace("%3d", "="); byte[] bytes1 = Convert.FromBase64String(data); MemoryStream memStream1 = new MemoryStream(bytes1); Image a = new Bitmap(memStream1); a.Save(filePhysicalPath); var url = "/upload/" + fileName; return Content(url); } var data = data1.Replace("%2f", "/").Replace("%3d", "=");