下载图片"/>
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();}
})
更多推荐
js实现复制图片到剪切板下载图片
发布评论