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

下载图片"/>

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

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

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

生成二维码，可以用qrcode。
.qrcode/1.0/jquery.qrcode.min.js
github地址：

$('#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();}
})