base64图复制到剪切板
谷歌和360浏览器只在https协议或本机操作localhost下有效,其他情况只能用document.execCommand("copy"),并且只能粘贴到word或excel中,不能粘贴到画图
var self = this if(self.curMuban.MBSLT == ''){ alert('没有图片可复制') return } var base64Top = self.curMuban.MBSLT.split(',')[0]; var base64Data = self.curMuban.MBSLT.split(',')[1]; var data = this.curMuban.MBSLT if (typeof navigator.clipboard != 'undefined') { var blobInput = convertBase64ToBlob(base64Data, 'image/png'); var clipboardItemInput = new ClipboardItem({ 'image/png': blobInput }); navigator.clipboard.write([clipboardItemInput]); console.log('success'); } else { var copy = document.createElement("img"); copy.src = data; copy.width = 600; $("body").append(copy); var range = document.createRange(); /*这里传入的是一个节点,可以是你自己html里面的,不用在这里来创建 如 p标签 <p class="coyp">我想复制的内容</p> 直接$(".copy")[0] */ range.selectNode(copy); var selection = window.getSelection(); if (selection){ if (selection.rangeCount > 0) selection.removeAllRanges(); selection.addRange(range); } document.execCommand("copy"); copy.style.display = "none"; }
function convertBase64ToBlob(base64, type) {
var bytes = window.atob(base64);
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: type });
}
复制文字
copyFn(){ var res = this.WLMC+','+this.WLDH this.copy(res) }, copy(data) { var copy = document.createElement("p"); copy.innerText = data; $("body").append(copy); var range = document.createRange(); /*这里传入的是一个节点,可以是你自己html里面的,不用在这里来创建 如 p标签 <p class="coyp">我想复制的内容</p> 直接$(".copy")[0] */ range.selectNode(copy); var selection = window.getSelection(); if (selection) { if (selection.rangeCount > 0) selection.removeAllRanges(); selection.addRange(range); } document.execCommand("copy"); /*这里可以放自己的提示方法*/ copy.style.display = "none"; },
下载base64图片
var self = this if(self.curMuban.MBSLT == ''){ alert('没有图片可下载') return } var eventPayload = {} eventPayload.content = self.curMuban.MBSLT.split(',')[1] eventPayload.fileName = self.tpmc eventPayload.imageType = self.tpmc.split('.')[1] // "content": "iVBORw0KGgo………………Plpg==", // //图片base64格式太多,此处省略。不包含前缀:data:image/png;base64, // "fileName": "12346190010jpg.png", // "imageType": "png" // }; console.log(eventPayload) var content = eventPayload.content; var imageType = eventPayload.imageType; var fileName = eventPayload.fileName; console.log('fileName'); if(content){ // 接口返回的数据部分 // 解析图片 // 因接口直接返回了base64代码部分,所以不需要截取,如果含"data:image/png;base64," 则需要自己做截取处理 var raw = window.atob(content); var rawLength = raw.length; var uInt8Array = new Uint8Array(rawLength); for(var i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } var blob = new Blob([uInt8Array], {type:'image/'+imageType}); //保存图片 var aLink = document.createElement('a'); var evt = document.createEvent("HTMLEvents"); evt.initEvent("click", true, true); aLink.download = fileName; aLink.href = URL.createObjectURL(blob); aLink.click(); } else{ console.log('没有base64代码'); }
下载zip
<iframe width="0" height="0" frameborder="0" name="hrong" style="display:none"></iframe>
//var str = './images/1.zip'
var str = info; window.frames["hrong"].location.href = str; sa(); function sa() { if(window.frames["hrong"].document.readyState!="complete"){ setTimeout("sa()", 100); }else{ window.frames["hrong"].document.execCommand('SaveAs'); } }
var fileURL = './images/1.zip' function cckk() { downloadURL(fileURL, '根据URL下载文件') } // 根据URL下载文件 function downloadURL(url, name) { let a = document.createElement("a"); a.href = url; a.download = name; a.click(); }
下载url图片会改变格式为png
var ImgURL = './images/1.jpg' function cckk() { downloadImgURL(ImgURL, '根据URL下载的图片') } // 根据URL下载图片 function downloadImgURL(url, name) { let image = new Image(); image.setAttribute("crossOrigin", "anonymous"); image.src = url; image.onload = () => { let canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; let ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0, image.width, image.height); canvas.toBlob(blob => { let url = URL.createObjectURL(blob); let a = document.createElement("a"); a.download = name; a.href = url; a.click(); a.remove(); // 用完释放URL对象 URL.revokeObjectURL(url); }); }; }