复制图片到剪切板

最新推荐文章于 2023-09-12 14:10:53 发布

Tanjc518

最新推荐文章于 2023-09-12 14:10:53 发布

阅读量818

点赞数

分类专栏：笔记文章标签： css javascript react.js

本文链接：https://blog.csdn.net/Tanjc518/article/details/121498253

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

复制图片待剪切板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js复制图片-文字</title>
</head>
<body>

<div>
    <img id="hidImag" src="https://static.cnodejs.org/FtG0YVgQ6iginiLpf9W4_ShjiLfU"/>
</div>
<input id="copy" type="button" style="cursor: pointer;" value="复制图片到剪切板">
<script type="text/javascript">
    let img = document.getElementById('hidImag')
    /**
     *
     * @param url 图片路径
     * @param ext 图片格式
     * @param callback 结果回调
     */
    function getUrlBase64(url, ext, callback) {
        var canvas = document.createElement("canvas");   //创建canvas DOM元素
        var ctx = canvas.getContext("2d");
        var img = new Image;
        img.crossOrigin = 'Anonymous';
        img.src = url;
        img.onload = function () {
            canvas.height = 100; //指定画板的高度,自定义
            canvas.width = 100; //指定画板的宽度，自定义
            ctx.drawImage(img, 0, 0, 100, 100); //参数可自定义
            var dataURL = canvas.toDataURL("image/" + ext);
            callback.call(this, dataURL); //回掉函数获取Base64编码
            canvas = null;
        };
    }
    let str1 = ''
    copy.onclick = function () {
        try {
            const base64Data = str1
            if (document.body.createControlRange) { //IE 11 需要有个img标签
                var controlRange;
                var imgs = document.getElementById('hidImag');
                imgs.onload = function () {
                    controlRange = document.body.createControlRange();
                    imgs.contentEditable = 'true';
                    controlRange.addElement(imgs);
                    try {
                        var successful = controlRange.execCommand('copy');
                        var msg = successful ? 'successful' : 'unsuccessful';
                        console.log('Copying text command was ' + msg);
                    } catch (err) {
                        console.log(err);
                    }
                }
                imgs.src = 'data:image/png;base64,' + base64Data;
            } else { //chrome
                const blobInput = convertBase64ToBlob(base64Data, 'image/png');
                const clipboardItemInput = new ClipboardItem({'image/png': blobInput});
                navigator.clipboard.write([clipboardItemInput]);
                console.log(blobInput, 'success', clipboardItemInput);
            }
        } catch (e) {
            console.log(e);
        }
    }

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


    getUrlBase64('https://static.cnodejs.org/FtG0YVgQ6iginiLpf9W4_ShjiLfU' , 'png', (data)=>{
        str1 = data.split('base64,')[1]
    })
</script>
</body>
</html>

Tanjc518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制图片到剪切板

复制图片待剪切板<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js复制图片-文字</title></head><body><div> <img id="hidImag" src="https://static.cnodejs.org/FtG0YVgQ6iginiLpf9
复制链接

扫一扫

专栏目录