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

最新推荐文章于 2024-09-01 17:43:51 发布

萌圆圆不萌

最新推荐文章于 2024-09-01 17:43:51 发布

阅读量7.5k

点赞数 2

分类专栏： js 文章标签： js 复制图片下载图片

本文链接：https://blog.csdn.net/amyleeYMY/article/details/99311440

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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

经后来测试，发现这种方法并不通用，我在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或table
    width: 100,
    height: 100,
    text: url   //需要生成二维码的内容
});

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

var drawing = $('#code canvas')[0];
//确定浏览器支持<canvas>元素
if (drawing.getContext) {
    var context = drawing.getContext('2d');
    //取得图像的数据 URI
    var 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) {
        //ie
        var 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();
  }
})