图片粘贴到网页中话不说直接上代码" style="border-bottom:1px solid rgb(234,236,239);line-height:1.25;font-size:1.75em;color:rgb(36,41,46);font-family:'-apple-system', BlinkMacSystemFont, '微软雅黑', 'PingFang SC', Helvetica, Tahoma, Arial, 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, '宋体', Heiti, '黑体', sans-serif;">实现通过按下ctrl + v将粘贴板上的图片粘贴到网页中,话不说直接上代码
js" style="color:rgb(51,51,51);background-position:0px 0px;background-color:transparent;font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;font-size:11.9px;border:0px;line-height:inherit;">js-meta" style="font-weight:700;color:rgb(153,153,153);"><!DOCTYPE html>
js-tag" style="color:#000080;"><js-name">html js-attr" style="color:#008080;">lang=js-string" style="color:rgb(221,17,68);">"en">
js-tag" style="color:#000080;"><js-name">head>
js-tag" style="color:#000080;"><js-name">meta js-attr" style="color:#008080;">charset=js-string" style="color:rgb(221,17,68);">"UTF-8">
js-tag" style="color:#000080;"><js-name">title>图片粘贴js-tag" style="color:#000080;"></js-name">title>
js-tag" style="color:#000080;"><js-name">style>
js-selector-id" style="color:rgb(153,0,0);font-weight:700;">#img{
js-attribute" style="color:#000080;">width: js-number" style="color:#008080;">500px;
}
js-tag" style="color:#000080;"></js-name">style>
js-tag" style="color:#000080;"><js-name">img js-attr" style="color:#008080;">id=js-string" style="color:rgb(221,17,68);">"img" js-attr" style="color:#008080;">src=js-string" style="color:rgb(221,17,68);">"" js-attr" style="color:#008080;">alt=js-string" style="color:rgb(221,17,68);">"">
通过Ctrl + v将图片粘贴
js-tag" style="color:#000080;"></js-name">head>
js-tag" style="color:#000080;"><js-name">body>
js-tag" style="color:#000080;"><js-name">script>
setPasteImg();
js-comment" style="color:rgb(153,153,136);font-style:italic;">//获取粘贴板上的图片
js-function">js-keyword" style="color:rgb(51,51,51);font-weight:700;">function js-title" style="color:rgb(153,0,0);font-weight:700;">setPasteImg(js-params">){
js-comment" style="color:rgb(153,153,136);font-style:italic;">//粘贴事件
js-built_in" style="color:rgb(0,134,179);">document.addEventListener(js-string" style="color:rgb(221,17,68);">'paste', js-function">js-keyword" style="color:rgb(51,51,51);font-weight:700;">function(js-params">event){
js-keyword" style="color:rgb(51,51,51);font-weight:700;">if (event.clipboardData || event.originalEvent) {
js-keyword" style="color:rgb(51,51,51);font-weight:700;">var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
js-keyword" style="color:rgb(51,51,51);font-weight:700;">if(clipboardData.items){
js-keyword" style="color:rgb(51,51,51);font-weight:700;">var blob;
js-keyword" style="color:rgb(51,51,51);font-weight:700;">for (js-keyword" style="color:rgb(51,51,51);font-weight:700;">var i = js-number" style="color:#008080;">0; i < clipboardData.items.length; i++) {
js-keyword" style="color:rgb(51,51,51);font-weight:700;">if (clipboardData.items[i].type.indexOf(js-string" style="color:rgb(221,17,68);">"image") !== js-number" style="color:#008080;">-1) {
blob = clipboardData.items[i].getAsFile();
}
}
js-keyword" style="color:rgb(51,51,51);font-weight:700;">var render = js-keyword" style="color:rgb(51,51,51);font-weight:700;">new FileReader();
render.onload = js-function">js-keyword" style="color:rgb(51,51,51);font-weight:700;">function (js-params">evt) {
js-comment" style="color:rgb(153,153,136);font-style:italic;">//输出base64编码
js-keyword" style="color:rgb(51,51,51);font-weight:700;">var base64 = evt.target.result;
js-built_in" style="color:rgb(0,134,179);">document.getElementById(js-string" style="color:rgb(221,17,68);">'img').setAttribute(js-string" style="color:rgb(221,17,68);">'src',base64);
}
render.readAsDataURL(blob);
}
}
})
}
js-tag" style="color:#000080;"></js-name">script>
js-tag" style="color:#000080;"></js-name">body>
js-tag" style="color:#000080;"></js-name">html>演示结果
