• 复制图片,复制文字,下载图片


    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);
                });
            };
        }
  • 相关阅读:
    SQLalchemy 字段类型
    爬虫学习
    Linux了解一下
    django-rest-framework
    vue相关理论知识
    Django认证系统
    Form组件
    JS之AJAX
    Django之中间件
    Django之ORM
  • 原文地址:https://www.cnblogs.com/liufeiran/p/16301195.html
Copyright © 2020-2023  润新知