js实现点击后将文字或图片复制到剪贴板的方法
投稿：shichen2014
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了js实现点击后将文字或图片复制到剪贴板的方法,功能非常实用,需要的朋友可以参考下
本文实例讲述了js实现点击后将文字或图片复制到剪贴板的方法，代码非常简洁实用，具体功能代码如下所示：
实现复制文字代码：
&table width="99%" border="0" cellpadding="0" cellspacing="0" class="firtable"&
&th width="100%" style="color:"&&s:text name="询单明细"&&/s:text&&/th&
&td align="center"&
&textarea name="inquiryContact1" id="inquiryContact1" rows="15" cols="60" readonly="readonly"&&/textarea&
&div id="inquiryInfoDIV" style="display:none"&
&s:property value="inquiryContact" escape="false"/&
dojo.byId("inquiryContact1").innerText=dojo.byId("inquiryInfoDIV").innerT
&/td& &/tr&
&td align="center"&
&input type="button" id="button" name="button" value="复制" onclick="copyContact()"/&
&/td& &/tr& &/table&
&script type="text/javascript"&
var i = 0 ;
function copyContact(){
var contat = document.getElementById("inquiryContact1").
window.clipboardData.setData('text', contat);
if(window.clipboardData.getData('text')==''){
alert("复制失败，请手动Ctrl+C快捷键复制！");
alert("复制失败，请重新复制！");
alert("内容已经复制到剪贴板！");
实现复制图片代码：
&!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&title&Insert title here&/title&
&SCRIPT LANGUAGE="JScript"&
var oPopup = window.createPopup();
function ButtonClick(div)
//var div = document.getElementById('divId');
div.contentEditable = 'true';
var controlR
if (document.body.createControlRange) {
controlRange = document.body.createControlRange();
controlRange.addElement(div);
controlRange.execCommand('Copy');
div.contentEditable = 'false';
&div id="divId1"&
&img src="F:/4964.jpg" onclick="ButtonClick(this)"&
感兴趣的读者可以测试自己测试一下代码，或者对其功能进行修改和完善！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具&>&一个可以批量抓取网页图片的工具
一个可以批量抓取网页图片的工具
上传大小：112KB
本程序可以抓取指定IE窗口中已下载完毕的网页中的全部或部分图片（可根据图片文件后缀和图片所属站点的域名过滤，也可以对单个图片进行选取），对于选中的图片，可以：
1）抓取文件URL列表，可以转换为UBB代码或HTML代码，便于将选中的图片批量转贴到支持UBB的论坛
2）另存图片到指定的本地文件夹，另存时可沿用原来的文件名，也可批量重命名（类似于ACDSee）；对于相同文件名已存在的情况，可以选择跳过、覆盖、重命名或提示；因为是从Internet临时文件夹中复制，所以感觉会很快...展开收缩
综合评分：3.9（44位用户评分）
所需积分/C币：
下载个数：306
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var q = $("#form1").serializeArray();
console.log(q);
var res_area_r = $.trim($(".res_area_r").val());
if (res_area_r == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
var mess = $(".res_area_r").val();
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, _username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click",'.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
$(".res_area_r").val($.trim($(".res_area").val()));
评论共有20条
坑爹啊，骗我积分
不错哦 这个太强悍了。。
谢谢分享，可以用，但没达到理想的效果。
非常好！！！
这个工具真实用呀
我是用不起来，哎
没有用起来
完全不能用~~~
这个还行，但不是很精确
这样抓图片就方便多啦。
审核通过送C币
ADO.NET书籍整理
创建者：nextsuperman
ASP.NET书籍整理
创建者：nextsuperman
善人的VB源程序
创建者：chengshanren
上传者其他资源上传者专辑
网页设计典型应用技巧html源码
星号查看器、密码查看器xpass v2.2
柯美、柯尼卡、konica 250黑白打印机驱动（32、64位）
胜为UDC-324,UDC-325蓝牙驱动(win7,32位）
胜为UDC-324,UDC-325蓝牙驱动（64位）
开发技术热门标签
VIP会员动态
下载频道用户反馈专区
下载频道积分规则调整V1710.18
开通VIP，海量IT资源任性下载
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
CSDN&VIP年卡&4000万程序员的必选
为了良好体验，不建议使用迅雷下载
一个可以批量抓取网页图片的工具
会员到期时间：
剩余下载个数：
剩余C币：593
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
(仅够下载10个资源)
全站1200个资源免积分下载
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
全站600个资源免积分下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
全站1200个资源免积分下载
为了良好体验，不建议使用迅雷下载
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
ofshanghai
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
一个可以批量抓取网页图片的工具后使用快捷导航没有帐号？
只需一步，快速开始
查看: 17188|回复: 7
求一段纯HTML代码的图片效果，图片自动播放切换效果 ，可以带琏接功能的。谢谢。
UID587362在线时间 小时积分381帖子离线17477 天注册时间
中级会员, 积分 381, 距离下一级还需 119 积分
求一段纯HTML代码的图片效果，图片自动播放切换效果 ，可以带琏接功能的。谢谢。
能在HTML程序中运行就可以了。只要三张图片。谢谢！
UID587362在线时间 小时积分381帖子离线17477 天注册时间
中级会员, 积分 381, 距离下一级还需 119 积分
只要能轮着不断播放，能带琏接就可以了，
UID113052在线时间 小时积分2117帖子离线17477 天注册时间
银牌会员, 积分 2117, 距离下一级还需 883 积分
懒人图库里有一大堆的
UID589038在线时间 小时积分573帖子离线17477 天注册时间
高级会员, 积分 573, 距离下一级还需 427 积分
楼上说的很正确的啊烂人图区一堆这样的东西
UID516610在线时间 小时积分1142帖子离线17477 天注册时间
银牌会员, 积分 1142, 距离下一级还需 1858 积分
lz 自己 搜索一下 这效果海了去了.....
UID61458在线时间 小时积分832帖子离线17477 天注册时间
高级会员, 积分 832, 距离下一级还需 168 积分
没看到人家楼主说的嘛
你们这些人，看问题，不思考，就回答
不负责任。
UID637055在线时间 小时积分3帖子离线17477 天注册时间
新手上路, 积分 3, 距离下一级还需 47 积分
&SCRIPT language=JavaScript&
var imgUrl = new Array();
var imgOpenUrl = new Array();
var imgTxt = new Array();
imgUrl[0]='图片1（不需要路径）';
imgOpenUrl[0]='图片1指向的链接地址';
imgTxt[0]='图片1的标题文字';
imgUrl[1]='图片2';
imgOpenUrl[1]='图片2指向的链接地址';
imgTxt[1]='图片2的标题文字';
imgUrl[2]='图片3';
imgOpenUrl[2]='图片3指向的链接地址';
imgTxt[2]='图片3的标题文字';
imgUrl[3]='图片4';
imgOpenUrl[3]='图片4指向的链接地址';
imgTxt[3]='图片4的标题文字';
imgUrl[4]='图片5';
imgOpenUrl[4]='图片5指向的链接地址';
imgTxt[4]='图片5的标题文字';
imgUrl[5]='图片6';
imgOpenUrl[5]='图片6指向的链接地址';
imgTxt[5]='图片6的标题文字';
var VisIndex=0;
var imgPre=new Array();
for (i=1;i&=imgUrl.i++)
if( (imgTxt[i]!=&&) && (imgOpenUrl[i]!=&&) )
var key=0;
function nextImg()
var img = document.getElementById(&imgVis&);
var txt = document.getElementById(&imgVisText&);
if( img != null && txt != null)
& &&&if( 10 == 0)
& && &img.src = &起始图片名称&;
& &&&if( 10 == 1)
& && &img.src = &图片文件夹路径& + imgUrl[0];
& && &txt.innerHTML = imgTxt[0];
& &&&if(VisIndex + 1 & 5)
& && &VisIndex ++;
& && &VisIndex = 0;
& &&&if( key == 0 )
& && &key = 1;
& && &VisIndex = 0;
& && && &if(img.filters)
& && && &{
& && && & img.filters.revealTrans.Transition=23;
& && && & img.filters.revealTrans.apply();& &
& && && && && & img.filters.revealTrans.play();
& && && && &}
& &&&img.src = &图片文件夹路径& + imgUrl[VisIndex];
& &&&img.alt = imgTxt[VisIndex];
& &&&txt.innerHTML = imgTxt[VisIndex];
theTimer = setTimeout(&nextImg()&, 5000);
function goUrl()
window.open(&链接文件的路径& + imgOpenUrl[VisIndex]);
&A href=&javascript:goUrl()&&&IMG name=imgVis width=&300& height=&190& id=imgVis
style=&FILTER: revealTrans(duration=2,transition=20)& border=&0&&&/A&
&div align=&center&&&font color=&#FFFFFF&&&SPAN id=imgVisText&&/SPAN&&/font&&/div&
nextImg();
UID580873在线时间 小时积分2109帖子离线17477 天注册时间
银牌会员, 积分 2109, 距离下一级还需 891 积分
纯html？不能用css、js？那还真没办法
Powered by私信发送成功
实现右键直接粘贴在文本框上，图片上传到服务器并返回一个img的地址，适配IE11、FF、Chrome。这个是前台，用wangEditor测试，用户需引入wangEditor.min.js。
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&wangEditor demo&/title&
&div id="editor"&
&p&欢迎使用 &b&wangEditor&/b& 富文本编辑器&/p&
&script type="text/javascript" src="jquery-1.9.1.js"&&/script&
&script type="text/javascript" src="paste.js"&&/script&
&script type="text/javascript" src="wangEditor.min.js"&&/script&
&script type="text/javascript"&
var E = window.wangE
var editor = new E('#editor');
editor.create();
function getElementsClass(classnames) {
var classobj = new Array();
var classint = 0;//定义数组的下标
var tags = document.getElementsByTagName("*");//获取HTML的所有标签
for (var i in tags) {
//对标签进行遍历
if (tags[i].nodeType == 1) {//判断节点类型
if (tags[i].getAttribute("class") == classnames)//判断和需要CLASS名字相同的，并组成一个数组
classobj[classint] = tags[i];
classint++;
//获取文本框的dom元素
var a = getElementsClass("w-e-text");
//绑定监听事件
a[0].addEventListener('paste', function (event) {
var broswerType = GetBrowserType();
if (broswerType == "Chrome") {
var clipboard = event.clipboardD
var blob =
for (var i = 0; i & event.clipboardData.items. i++) {
console.log(clipboard.items[i].type);
if (clipboard.items[i].type.indexOf("image") != -1) {
alert("正在上传图片");
blob = clipboard.items[i].getAsFile();
//转成base64编码，获取一个图片
var reader = new window.FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
var base64data = reader.
//ajax上传base64到后台解析
doAjax(base64data);
else if (clipboard.items[i].type.indexOf("html") != -1) {
var html = $(event.clipboardData.getData("text/html"));
html.find("img").each(function () {
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var img = document.createElement("img");
var src = $(this).attr("src");
var _this =
var imageS = new Image();
context.drawImage(img, 0, 0, img.width, img.height);
imageS.src = canvas.toDataURL("image/png");
alert("正在上传图片");
doAjax(imageS.src);
//阻止默认粘贴事件
event.originalEvent.preventDefault();
//非Chrome浏览器
$(function () {
if (GetBrowserType() != "Chrome") {
$('.w-e-text').pastableContenteditable();
$('.w-e-text').html("&p&&/p&");
$('.w-e-text').on('pasteImage', function (ev, data) {
var blobUrl = URL.createObjectURL(data.blob);
doAjax(data.dataURL);
}).on('pasteImageError', function (ev, data) {
alert('ERROR: ' + data.message);
if (data.url) {
alert('无法获取图片资源:' + data.url)
function doAjax(base64data) {
url: "/doupload",
type: 'post',
data: base64data,
dataType: 'html',
success: function (data, status) {//操作成功后的操作！data是后台传过来的值
if (status == "success") {
console.log(data);
//往富文本框添加图片
var imgTag = document.createElement('img');
imgTag.src =
$(".w-e-text").append(imgTag);
error: function (xhr, textStatus, errorThrown) {
alert("error");
function GetBrowserType() {
var userAgent = navigator.userA
var isOpera = userAgent.indexOf("Opera") & -1;
if (isOpera) {
return "Opera"
//判断是否Opera浏览器
if (userAgent.indexOf("Firefox") & -1) {
return "FF";
} //判断是否Firefox浏览器
if (userAgent.indexOf("Chrome") & -1) {
return "Chrome";
if (userAgent.indexOf("Safari") & -1) {
return "Safari";
} //判断是否Safari浏览器
return "IE";//其他的就当IE吧
引入的 paste.js ，在GitHub上看到的一个适配主流浏览器的粘贴图片的轮子。
// 源地址 /layerssss/paste.js/
(function() {
var $, Paste, createHiddenEditable, dataURLtoBlob, isF
$ = window.jQ
$.paste = function(pasteContainer) {
if (typeof console !== "undefined" && console !== null) {
console.log("DEPRECATED: This method is deprecated. Please use $.fn.pastableNonInputable() instead.");
pm = Paste.mountNonInputable(pasteContainer);
return pm._
$.fn.pastableNonInputable = function() {
var el, j, len,
for (j = 0, len = ref. j & j++) {
el = ref[j];
if (el._pastable || $(el).is('textarea, input:text, [contenteditable]')) {
Paste.mountNonInputable(el);
el._pastable =
$.fn.pastableTextarea = function() {
var el, j, len,
for (j = 0, len = ref. j & j++) {
el = ref[j];
if (el._pastable || $(el).is(':not(textarea, input:text)')) {
Paste.mountTextarea(el);
el._pastable =
$.fn.pastableContenteditable = function() {
var el, j, len,
for (j = 0, len = ref. j & j++) {
el = ref[j];
if (el._pastable || $(el).is(':not([contenteditable])')) {
Paste.mountContenteditable(el);
el._pastable =
dataURLtoBlob = function(dataURL, sliceSize) {
var b64Data, byteArray, byteArrays, byteCharacters, byteNumbers, contentType, i, m, offset, ref,
if (sliceSize == null) {
sliceSize = 512;
if (!(m = dataURL.match(/^data\:([^\;]+)\;base64\,(.+)$/))) {
ref = m, m = ref[0], contentType = ref[1], b64Data = ref[2];
byteCharacters = atob(b64Data);
byteArrays = [];
offset = 0;
while (offset & byteCharacters.length) {
slice = byteCharacters.slice(offset, offset + sliceSize);
byteNumbers = new Array(slice.length);
while (i & slice.length) {
byteNumbers[i] = slice.charCodeAt(i);
byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
offset += sliceS
return new Blob(byteArrays, {
type: contentType
createHiddenEditable = function() {
return $(document.createElement('div')).attr('contenteditable', true).attr('aria-hidden', true).attr('tabindex', -1).css({
height: 1,
position: 'fixed',
left: -100,
overflow: 'hidden'
isFocusable = function(element, hasTabindex) {
var fieldset, focusableIfVisible, img, map, mapName, nodeN
map = void 0;
mapName = void 0;
img = void 0;
focusableIfVisible = void 0;
fieldset = void 0;
nodeName = element.nodeName.toLowerCase();
if ('area' === nodeName) {
map = element.parentN
mapName = map.
if (!element.href || !mapName || map.nodeName.toLowerCase() !== 'map') {
img = $('img[usemap=\'#' + mapName + '\']');
return img.length & 0 && img.is(':visible');
if (/^(input|select|textarea|button|object)$/.test(nodeName)) {
focusableIfVisible = !element.
if (focusableIfVisible) {
fieldset = $(element).closest('fieldset')[0];
if (fieldset) {
focusableIfVisible = !fieldset.
} else if ('a' === nodeName) {
focusableIfVisible = element.href || hasT
focusableIfVisible = hasT
focusableIfVisible = focusableIfVisible || $(element).is('[contenteditable]');
return focusableIfVisible && $(element).is(':visible');
Paste = (function() {
Paste.prototype._target =
Paste.prototype._container =
Paste.mountNonInputable = function(nonInputable) {
paste = new Paste(createHiddenEditable().appendTo(nonInputable), nonInputable);
$(nonInputable).on('click', (function(_this) {
return function(ev) {
if (!isFocusable(ev.target, false)) {
return paste._container.focus();
})(this));
paste._container.on('focus', (function(_this) {
return function() {
return $(nonInputable).addClass('pastable-focus');
})(this));
return paste._container.on('blur', (function(_this) {
return function() {
return $(nonInputable).removeClass('pastable-focus');
})(this));
Paste.mountTextarea = function(textarea) {
var ctlDown, paste, ref, ref1;
if ((typeof DataTransfer !== "undefined" && DataTransfer !== null ? DataTransfer.prototype : void 0) && ((ref = Object.getOwnPropertyDescriptor) != null ? (ref1 = ref.call(Object, DataTransfer.prototype, 'items')) != null ? ref1.get : void 0 : void 0)) {
return this.mountContenteditable(textarea);
paste = new Paste(createHiddenEditable().insertBefore(textarea), textarea);
$(textarea).on('keyup', function(ev) {
if ((ref2 = ev.keyCode) === 17 || ref2 === 224) {
$(textarea).on('keydown', function(ev) {
if ((ref2 = ev.keyCode) === 17 || ref2 === 224) {
if ((ev.ctrlKey != null) && (ev.metaKey != null)) {
ctlDown = ev.ctrlKey || ev.metaK
if (ctlDown && ev.keyCode === 86) {
paste._textarea_focus_stolen =
paste._container.focus();
paste._paste_event_fired =
setTimeout((function(_this) {
return function() {
if (!paste._paste_event_fired) {
$(textarea).focus();
return paste._textarea_focus_stolen =
})(this), 1);
$(textarea).on('paste', (function(_this) {
return function() {};
})(this));
$(textarea).on('focus', (function(_this) {
return function() {
if (!paste._textarea_focus_stolen) {
return $(textarea).addClass('pastable-focus');
})(this));
$(textarea).on('blur', (function(_this) {
return function() {
if (!paste._textarea_focus_stolen) {
return $(textarea).removeClass('pastable-focus');
})(this));
$(paste._target).on('_pasteCheckContainerDone', (function(_this) {
return function() {
$(textarea).focus();
return paste._textarea_focus_stolen =
})(this));
return $(paste._target).on('pasteText', (function(_this) {
return function(ev, data) {
var content, curEnd, curS
curStart = $(textarea).prop('selectionStart');
curEnd = $(textarea).prop('selectionEnd');
content = $(textarea).val();
$(textarea).val("" + content.slice(0, curStart) + data.text + content.slice(curEnd));
$(textarea)[0].setSelectionRange(curStart + data.text.length, curStart + data.text.length);
return $(textarea).trigger('change');
})(this));
Paste.mountContenteditable = function(contenteditable) {
paste = new Paste(contenteditable, contenteditable);
$(contenteditable).on('focus', (function(_this) {
return function() {
return $(contenteditable).addClass('pastable-focus');
})(this));
return $(contenteditable).on('blur', (function(_this) {
return function() {
return $(contenteditable).removeClass('pastable-focus');
})(this));
function Paste(_container, _target) {
this._container = _
this._target = _
this._container = $(this._container);
this._target = $(this._target).addClass('pastable');
this._container.on('paste', (function(_this) {
return function(ev) {
var clipboardData, file, item, j, k, len, len1, reader, ref, ref1, ref2, ref3,
if (ev.currentTarget !== ev.target) {
return ev.preventDefault();
_this._paste_event_fired =
if (((ref = ev.originalEvent) != null ? ref.clipboardData : void 0) != null) {
clipboardData = ev.originalEvent.clipboardD
if (clipboardData.items) {
ref1 = clipboardData.
for (j = 0, len = ref1. j & j++) {
item = ref1[j];
if (item.type.match(/^image\//)) {
reader = new FileReader();
reader.onload = function(event) {
return _this._handleImage(event.target.result);
reader.readAsDataURL(item.getAsFile());
} catch (error) {}
ev.preventDefault();
if (item.type === 'text/plain') {
item.getAsString(function(string) {
return _this._target.trigger('pasteText', {
text: string
if (-1 !== Array.prototype.indexOf.call(clipboardData.types, 'text/plain')) {
text = clipboardData.getData('Text');
setTimeout(function() {
return _this._target.trigger('pasteText', {
text: text
_this._checkImagesInContainer(function(src) {
return _this._handleImage(src);
if (clipboardData = window.clipboardData) {
if ((ref2 = (text = clipboardData.getData('Text'))) != null ? ref2.length : void 0) {
setTimeout(function() {
_this._target.trigger('pasteText', {
text: text
return _this._target.trigger('_pasteCheckContainerDone');
ref3 = clipboardData.
for (k = 0, len1 = ref3. k & len1; k++) {
file = ref3[k];
_this._handleImage(URL.createObjectURL(file));
_this._checkImagesInContainer(function(src) {});
})(this));
Paste.prototype._handleImage = function(src) {
if (src.match(/^webkit\-fake\-url\:\/\//)) {
return this._target.trigger('pasteImageError', {
message: "You are trying to paste an image in Safari, however we are unable to retieve its data."
loader = new Image();
loader.crossOrigin = "anonymous";
loader.onload = (function(_this) {
return function() {
var blob, canvas, ctx, dataURL;
canvas = document.createElement('canvas');
canvas.width = loader.
canvas.height = loader.
ctx = canvas.getContext('2d');
ctx.drawImage(loader, 0, 0, canvas.width, canvas.height);
dataURL = canvas.toDataURL('image/png');
blob = dataURLtoBlob(dataURL);
} catch (error) {}
if (dataURL) {
return _this._target.trigger('pasteImage', {
blob: blob,
dataURL: dataURL,
width: loader.width,
height: loader.height
loader.onerror = (function(_this) {
return function() {
return _this._target.trigger('pasteImageError', {
message: "Failed to get image from: " + src,
return loader.src =
Paste.prototype._checkImagesInContainer = function(cb) {
var img, j, len, ref,
timespan = Math.floor(1000 * Math.random());
ref = this._container.find('img');
for (j = 0, len = ref. j & j++) {
img = ref[j];
img["_paste_marked_" + timespan] =
return setTimeout((function(_this) {
return function() {
var k, len1, ref1;
ref1 = _this._container.find('img');
for (k = 0, len1 = ref1. k & len1; k++) {
img = ref1[k];
if (!img["_paste_marked_" + timespan]) {
cb(img.src);
$(img).remove();
return _this._target.trigger('_pasteCheckContainerDone');
})(this), 1);
}).call(this);
后端服务器接收并解析的 Servlet
import sun.misc.BASE64D
import javax.servlet.http.HttpServletR
import java.io.*;
import java.util.R
* Created by LXM on .
public class Servlet extends javax.servlet.http.HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
request.setCharacterEncoding("utf-8");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
String data = request.getReader().readLine();
System.out.println(data);
Random random = new Random();
String path = random.nextInt(10000) + "." + data.split(",")[0].split("image/")[1].split(";")[0];
boolean result = GenerateImage(data.split(",")[1], "F:\\MyJavaWebs\\Server4Upload\\out\\artifacts\\Server4Upload_war_exploded\\RichTextArea\\ImgTmp\\A" + path);
renderData(response, "ImgTmp\\A" + path);
} catch (Exception e) {
e.printStackTrace();
protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
* base64解码成图片保存
* @param imgStr
* @param imgFilePath
public static boolean GenerateImage(String imgStr, String imgFilePath) {
if (imgStr == null) // 图像数据为空
BASE64Decoder decoder = new BASE64Decoder();
// Base64解码
byte[] bytes = decoder.decodeBuffer(imgStr);
for (int i = 0; i & bytes. ++i) {
if (bytes[i] & 0) {// 调整异常数据
bytes[i] += 256;
// 生成图片
OutputStream out = new FileOutputStream(imgFilePath);
out.write(bytes);
out.flush();
out.close();
} catch (Exception e) {
* 返回结果
* @param response
* @param path
private void renderData(HttpServletResponse response, String path) {
PrintWriter printWriter =
response.setHeader("Content-type", "text/charset=UTF-8");
printWriter = response.getWriter();
printWriter.print(path);
} catch (IOException ex) {
ex.printStackTrace();
} finally {
if (null != printWriter) {
printWriter.flush();
printWriter.close();
你可以在后，对此项目发表评论