zoukankan      html  css  js  c++  java
  • vue中点击按钮自动截图并下载图片

    点击一个按钮,截取对应区域的界面,才对截取的界面进行裁切并下载

    下载    html2canvas    npm install html2canvas  --save

    引用 :

    import html2canvas from 'html2canvas'


    components: {
    html2canvas
    },

    将你需要截取的部分用 id 包裹起来
    <div id="capture" ref="imageTofile">......</div>

    获取该区域
    html2canvas(document.querySelector("#capture")).then(canvas => {
    const imgUrl = canvas.toDataURL("png"); // 获取生成的图片的url
    console.log(imgUrl)
    })


    这样就可以得到你需要需要截取的屏幕区域了





    如果你需要再次对这样图片进行裁切

    const img = new Image();
    img.src = canvas.toDataURL("png");
    img.setAttribute('crossOrigin', 'anonymous');
    var canvas = document.createElement("canvas");//1. 获取画布

    const num = this.dataLength * 48 + 148;
    console.log(canvas)
    canvas.width = 530;//这个设置不能丢,否者会成为canvas默认的300*150的大小
    canvas.height = 500;//这个设置不能丢,否者会成为canvas默认的300*150的大小
    var ctx = canvas.getContext("2d");//2. 获取画布上下文
    img.onload=function() {
    var w = img.width
    var h = img.height
    ctx.drawImage(img, 0, 0, w, h, 0, 0, w, h)
    var dataURL = canvas.toDataURL("image/png");
    console.log('裁切后',dataURL)
    saveFile(dataURL,'images.jpg');// 下载图片

    }




    下载图片
    var saveFile = function(data, filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;

    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
    }





  • 相关阅读:
    第一课时之导读
    python学习之第十六课时--缩进(indentation)
    python学习之第十六课时--函数的作用及定义
    python学习之第十五课时--存址方式及拷贝
    Linux学习之第七课时--链接(link)文件
    Linux学习之第六课时--文件和目录操作管理命令
    Linux学习之第五课时--文本编辑器
    TOJ--1162---dfs(回溯)
    TOJ---3128---bfs(打印路径)
    TOJ---1502---map真强大
  • 原文地址:https://www.cnblogs.com/weiweiyeyu/p/12009674.html
Copyright © 2011-2022 走看看