900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html5图片剪切板 JavaScript 网页端复制图片到剪切板

html5图片剪切板 JavaScript 网页端复制图片到剪切板

时间:2021-01-11 05:33:50

相关推荐

html5图片剪切板 JavaScript 网页端复制图片到剪切板

前端页面可能需要复制图片到剪切板的功能,这里使用JavaScript来实现这一功能,兼容大部分浏览器

全部代码

复制图片到剪切板

复制图片

varSelectText=function(element){

vardoc=document;

if(doc.body.createTextRange){

varrange=document.body.createTextRange();

range.moveToElementText(element);

range.select();

}elseif(window.getSelection){

varselection=window.getSelection();

varrange=document.createRange();

range.selectNodeContents(element);

selection.removeAllRanges();

selection.addRange(range);

}

}

//复制图片

varcopyImage=document.getElementById("linkCopyImage");

copyImage.onclick=function(e){

//MakethecontainerDivcontenteditable

$(".zf-mass-code-img").attr("contenteditable",true);

//Selecttheimage

SelectText($('.zf-mass-code-img').get(0));

//ExecutecopyCommand

//Note:ThiswillONLYworkdirectlyinsideaclicklistenner

document.execCommand('copy');

//Unselectthecontent

window.getSelection().removeAllRanges();

//MakethecontainerDivuneditableagain

$('.zf-mass-code-img').removeAttr("contenteditable");

//Success!!

alert('复制图片成功');

}

ps: 需要部署到服务器才能预览复制图片效果

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。