复制图片，复制文字，下载图片

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);
            });
        };
    }

 

//图片大小验证
function verificationPicFile(file) {
    var fileSize = 0;
    var fileMaxSize = 1024;//1M
    var filePath = file.value;
    if (filePath) {
        fileSize = file.files[0].size;
        var size = fileSize / 1024;
        if (size > fileMaxSize) {
            $.messager.alert('提示', '图片不能大于1M!');
            file.value = "";
            return false;
        } else if (size <= 0) {
            $.messager.alert('提示', '图片不能为0M!');
            file.value = "";
            return false;
        }
    } else {
        return false;
    }
}