zoukankan      html  css  js  c++  java
  • 利用html2canvas直接在前端实现截图下载(解决跨域的问题)

    要实现前端跨域下载 前提是你需要访问的图片服务器 已经在HTTP响应标头中添加了 Access-Control-Allow-Origin * ,否则怎么下载都是一张空白图!

    html2canvas下载

    html2canvas官网
    或者直接使用npm命令导入
    npm install --save html2canvas

    html2canvas使用

    js方法可以直接复制
    function downLoadImg() {
                var img = document.getElementById('img3D'); // 获取要下载的图片            
                var imgsrc = img.src;
                var name = imgsrc.substring(imgsrc.lastIndexOf('/') + 1, imgsrc.length-4);                      
                html2canvas(img, {
                     img.clientWidth,
                    height: img.clientHeight,
                    allowTaint: false,
                    useCORS: true,//允许跨域
                }).then(canvas => {
                    let src = canvas.toDataURL('image/png', 1)
                    let image = new Image()
                    image.src = src
                    let url = image.src.replace(/^data:image/[^;]/, 'data:application/octet-stream')//输出类型
                    let a = document.createElement('a');//随便创建一个元素
                    a.download = `${name}.png`// 设置下载的文件名,默认是'下载'
                    a.href = url
                    document.body.appendChild(a)
                    a.click()
                    a.remove() // 下载之后把创建的元素删除
                });
            }
    
    标签 (这里的)crossorigin="anonymous"也需要添加来允许跨域

    <img id="img3D" src="" crossorigin="anonymous"/>

    html2canvas主要是用来做截屏的 不只是图片下载 你可以将标签换成其它的Div或者整个html 用来做截屏下载。

  • 相关阅读:
    ajax 同步模式与异步模式
    Ajax -get 请求
    Ajax -post 请求
    Ajax 遵循HTTP协议
    Ajax 发送请求
    宽高自适应案例
    伸缩导航案例
    伸缩属性的 grow与 shrink
    伸缩布局
    hdu-5858 Hard problem(数学)
  • 原文地址:https://www.cnblogs.com/bemad/p/15153081.html
Copyright © 2011-2022 走看看