美文网首页
js 点击复制文字,下载图片

js 点击复制文字,下载图片

作者: zlf_j | 来源:发表于2021-12-17 11:35 被阅读0次
点击按钮,复制链接
        copyLink(url) {
            var copyTest = url
            var inputTest = document.createElement('input')
            inputTest.value = copyTest
            document.body.appendChild(inputTest)
            inputTest.select()
            document.execCommand('Copy')
            inputTest.className = 'oInput'
            inputTest.style.display = 'none'
            _g.toastMsg('success', '已复制')
        },

https://www.cnblogs.com/2001-/p/13541728.html

下载图片
 download (url) {
            let img_name = this.img_name; // 用于动态设置下载图片名称
            const image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute('crossOrigin', 'anonymous');
            image.onload = function() {
                const canvas = document.createElement('canvas');
                canvas.width = image.width;
                canvas.height = image.height;
                const context = canvas.getContext('2d');
                context.drawImage(image, 0, 0, image.width, image.height);
                const url = canvas.toDataURL('image/png'); // 得到图片的base64编码数据
                const a = document.createElement('a'); // 生成一个a元素
                const event = new MouseEvent('click'); // 创建一个单击事件
                // a.download = 'image.png' || 'photo'; // 设置图片名称,固定
                a.download = img_name || 'photo'; // 动态设置图片名称,img_name为空,则名称为photo
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = url;
        },

https://blog.csdn.net/weixin_30335575/article/details/96795179

相关文章

网友评论

      本文标题:js 点击复制文字,下载图片

      本文链接:https://www.haomeiwen.com/subject/bpkmxrtx.html