js实现复制图片到剪切板下载图片

完整需求是这样的：生成一个二维码，然后提供复制和下载按钮。如果你是页面上已有一个图片，可以直接跳过前面的部分。

经后来测试，发现这种方法并不通用，我在qq和微信中不能粘贴，但是在钉钉中可以粘贴。具体原因没找到，所以最后放弃了复制图片?。

生成二维码，可以用qrcode。
http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js
github地址：https://github.com/davidshimjs/qrcodejs

$('#code').qrcode({render: 'canvas',   //可选canvas或tablewidth: 100,height: 100,text: url   //需要生成二维码的内容
});

要实现复制和下载功能，首先我们需要把图片从canvs转为img。

var drawing = $('#code canvas')[0];
//确定浏览器支持<canvas>元素
if (drawing.getContext) {var context = drawing.getContext('2d');//取得图像的数据 URIvar imgURI = drawing.toDataURL("image/png");//显示图像var image = document.createElement("img");image.src = imgURI;$('#code').html(image);
}

复制图片

// 选中区域
function getSelect (targetNode) {if (window.getSelection) {//chrome等主流浏览器var selection = window.getSelection();var range = document.createRange();range.selectNode(targetNode);selection.removeAllRanges();selection.addRange(range);} else if (document.body.createTextRange) {//ievar range = document.body.createTextRange();range.moveToElementText(targetNode);range.select();}
}
// 绑定点击事件
$('#copyBtn').off('click').click(e => {// 尝试过复制canvas和table，但不能达到预期效果。所以这里还是转为img再下载getSelect($('#code img')[0]);document.execCommand('copy');// copy之后清空选择区域window.getSelection().removeAllRanges();
})

下载图片

$('#downloadBtn').off('click').click(e => {var imgSrc = $('#code img').attr("src");if (!!window.ActiveXObject || "ActiveXObject" in window) {// 不支持download时，可提示用户右键下载} else {var alink = document.createElement("a");alink.href = imgSrc;alink.download = "图片.png";alink.click();}
})

js实现复制图片到剪切板下载图片相关推荐

js 复制图片到剪切板和 js复制文本到剪切板
js 复制图片到剪切板 <a href="javascript:;" id="copyQrcode" data-base=""> ...
JS复制图片到剪切板读取剪切板
JS复制图片到剪切板读取剪切板 navigator.clipboard实现复制图片图片写入剪切板 function handleCopyImg() { const canvas = documen ...
html5图片剪切板,原生js实现基于base64数据复制图片到剪切板，可以粘贴出图片，模拟浏览器复制功能。...
原生js实现基于base64数据复制图片到剪切板,可以粘贴出图片,模拟浏览器复制功能.前言: 初次发帖排版略丑,见谅.之前我们这边有个需求就是说,前端通过canvas截图然后, 点击一个按钮实现复制截 ...
JS复制图片到剪切板
业务场景系统中展示多张图片叠加展示,客户要求单击图片实现,将叠加的效果图复制到PC的剪切板,可以在社交等其他软件中粘贴. 网上复制文字的案例很多,这里分享一个复制图片到剪切板的代码,亲测有效. wi ...
html5 js 手机剪切板,JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)...
新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipb ...
base64图片复制到系统剪切板
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html5图片剪切板,JavaScript 网页端复制图片到剪切板
前端页面可能需要复制图片到剪切板的功能,这里使用JavaScript来实现这一功能,兼容大部分浏览器全部代码复制图片到剪切板复制图片 var SelectText = function (ele ...
vue复制图片到剪切板
vue复制图片到剪切板最开始使用clipboard2,本地和测试环境都能运行,到了生产环境就无法粘贴到微信. 后来搜索到可以将图片转换成blod直接复制到剪切板,代码如下 <img :src= ...
QT复制文本、图片到剪切板-QClipboard
QT复制文本.图片到剪切板-QClipboard 1. 概述 2. 代码示例 1. 概述复制文本或图片到剪切板在QT中可以使用QClipboard进行操作 2. 代码示例 #include &quo ...

js实现复制图片到剪切板下载图片

复制图片

下载图片

js实现复制图片到剪切板下载图片相关推荐

最新文章

热门文章