new Blob图片下载 js html2canvas vue 跨域图片本地处理

最新推荐文章于 2024-04-25 10:41:05 发布
最新推荐文章于 2024-04-25 10:41:05 发布
阅读量1.7k 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42374676/article/details/106467165
版权

是使用html2canvas


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
</head>

<body>
    <div id="content" style="width:150px;height:150px;border:1px solid blue;">
        <span>Hello World!</span>
        <br>
        <span>
            <h2>Are you hear me?</h2>
        </span>
    </div>
    <button id="btnSave">save</button>

<!-- 1）dom-to-image：dom-to-image

2）html2canvas:html2canvas

3）rasterizeHTML.js：rasterizeHTML.js -->
    <script>

        $(function () {
            $('#btnSave').click(function (event) {
                html2canvas($('#content'), {
                    onrendered: function (canvas) {
                        document.body.appendChild(canvas);
                        convertCanvasToImage(canvas);
                    }
                })

            });

            function convertCanvasToImage(canvas) {
                var image = new Image();
                image.src = canvas.toDataURL("image/png");
                document.body.appendChild(image);
                return image;
            }

        })
    </script>
</body>

</html>

使用dom-to-image


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/dom-to-image/2.5.2/dom-to-image.js"></script>
    <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
</head>

<body>
    <input type="button" id="btn" value="do it" />
    <h4>两行三列：</h4>
    <table id="table" border="1" style="width:200px;border-collapse: collapse;border:1px solid black;">
        <tr style="background:green;">
            <td rowspan="3">200</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr style="background:green;">
            <td rowspan="2">500</td>
            <td>600</td>
        </tr>
        <tr style="background:green;">
            <td>600</td>
        </tr>
        <tr style="background:skyblue;">
            <td rowspan="3">100</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr style="background:skyblue;">
            <td>500</td>
            <td>600</td>
        </tr>
        <tr style="background:skyblue;">
            <td>600</td>
            <td>600</td>
        </tr>
    </table>
    <script>

        $(function () {
            //
            $("#btn").click(function () {
                // 插入图片到html
                // var node = document.getElementById('table');
                // domtoimage.toPng(node).then(function (dataUrl) {
                //     var link = document.createElement('a');
                //               link.download = 'my-image-name.jpeg';
                //               link.href = dataUrl;
                //               link.click();


                //         var img = new Image();
                //         img.src = dataUrl;
                //         document.body.appendChild(img);
                //     });


                // 下载png图片
                //    domtoimage.toBlob(document.getElementById('table'))
                //       .then(function (blob) {
                //           window.saveAs(blob, 'my-node.png');
                //       });


                // 下载jpeg图片(失败)
                // domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
                //     .then(function (dataUrl) {
                //         console.log(dataUrl)
                //     });


                function filter(node) {
                    return (node.tagName !== 'i');
                }

                domtoimage.toSvg(document.getElementById('my-node'), { filter: filter })
                    .then(function (dataUrl) {
                        /* do something */
                        console.log(dataUrl)
                    });


                // var node = document.getElementById('table');
                // domtoimage.toPixelData(node).then(function (pixels) {
                //     for (var y = 0; y < node.scrollHeight; ++y) {
                //         for (var x = 0; x < node.scrollWidth; ++x) {
                //             pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
                //             /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
                //             pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
                //         }
                //     }
                // });
            })
        })
    </script>
</body>

</html>

FileSaver简介

 
           var a = document.createElement("a");
            var url = window.URL.createObjectURL(
                new Blob([this.gethtml()], {
                    type: ''
                })
            );
            a.href = url;
            a.download = "file.html";
            a.click();
            window.URL.revokeObjectURL(url);
        }


        FileSaver.js 简介
        try {
        var isFileSaverSupported = !!new Blob;
    } catch (e) {}

     require  使用
     var FileSaver = require('file-saver');
     var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
     FileSaver.saveAs(blob, "hello world.txt");

     文本变成文件
     var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
     FileSaver.saveAs(blob, "hello world.txt");
    
     保存画布
     var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d");
     // draw to canvas...
     canvas.toBlob(function(blob) {
     saveAs(blob, "pretty image.png");

     var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
     saveAs(file);

     npm install file-saver --save
     bower install file-saver
    
});

参考:https://www.cnblogs.com/jackyWHJ/articles/10435851.html

使用rasterizeHTML


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/rasterizehtml/1.3.0/rasterizeHTML.allinone.js"></script>
</head>

<body>
    <canvas id="canvas" style="width: 300;height: 900;border: 1px solid #ccc;"></canvas>
    <img src="./logo.png">
    <button onclick="startDownload()">下载</button>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext('2d')
        function startDownload() {
            // var img = new Image();
            // img.onload = function(){
            // 	alert('加载完毕')
            // 	// 将图片画到canvas上面上去！
            // 	ctx.drawImage(img,100,100);
            // }
            // img.src = "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1537549551&di=3f8d4d76679adcae225387f7d6b199aa&src=http://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/lvpics/h=800/sign=b49dc48f8718367ab28972dd1e728b68/9922720e0cf3d7ca7f0736d0f31fbe096a63a9a6.jpg";


            let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";

            var downloadedImg = new Image();
            let canvas = document.createElement("canvas");
            let ctx = canvas.getContext("2d");
            downloadedImg.crossOrigin = "Anonymous";
            downloadedImg.src = imageURL
            downloadedImg.onload=function(){
                ctx.drawImage(downloadedImg, 10, 10);
                // // let base = canvas.toDataURL('image/png');// 图片转化base64 画布污染 网路图片
            console.log(123)
            }
          

        }

        // rasterizeHTML.drawHTML(
        //     '<span style="color: green; font-size: 20px;">HTML</span>' +
        //     ' with an image ',
        //     canvas);

        

//             rasterizeHTML.drawURL( url [, canvas] [, options] )
// rasterizeHTML.drawHTML( html [, canvas] [, options] )
// rasterizeHTML.drawDocument( document [, canvas] [, options] )
    </script>
</body>

</html>

vue使用

配置文件
async:是否异步解析和呈现的元素

allowTaint:是否允许跨源图像到画布上的污点 

useCORS:尝试从服务器加载图像使用歌珥(跨域 配置)

canvas:现有的画布元素使用作为借鉴的基础

foreignObjectRendering:是否使用ForeignObject呈现如果浏览器支持它

imageTimeout:超时(以毫秒为单位)。设置为0以禁用超时

ignoreElements:谓词函数删除匹配元素的呈现

logging:启用日志用于调试目的

onclone:回调函数叫做文档时已经克隆了渲染,可以用来修改的内容呈现在不影响原来的源文档

proxy:Url的代理用于加载跨源图像。如果留空，则不会加载跨源图像

removeContainer:是否清理克隆的DOM元素暂时html2canvas创建

scale:用于规模呈现。默认为浏览器设备像素比

width:画布的宽度

x:作物画布坐标

scrollX:x-scroll位置时使用渲染元素(例如如果元素使用位置:固定)

windowWidth:窗口宽度渲染元素时使用,可能会影响诸如媒体查询
saveImg () {
  html2canvas(this.$refs.imageTofile, {
    backgroundColor: null
  }).then((canvas) => {
    let url = canvas.toDataURL('image/png')
    let downloadName = this.detailData.basic.act_name + '.png'
    this.downloadFile(downloadName, url)
  })
},
base64ToBlob (code) {
  let parts = code.split(';base64,')
  let contentType = parts[0].split(':')[1]
  let raw = window.atob(parts[1])
  let rawLength = raw.length
 
  let uInt8Array = new Uint8Array(rawLength)
 
  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i)
  }
  return new Blob([uInt8Array], {type: contentType})
},
downloadFile (fileName, content) {
  let aLink = document.createElement('a')
  let blob = this.base64ToBlob(content) // new Blob([content]);
 
  let evt = document.createEvent('HTMLEvents')
  evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
  aLink.download = fileName
  aLink.href = URL.createObjectURL(blob)
  aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}))// 兼容火狐
},

跨域图片本地处理

  shareImage() {
      this.$nextTick(() => {
        let img = document.querySelectorAll("img");
        if (img) {
          for (var j = 0; j < img.length; j++) {
           // console.log(img[j].src, "img");
            if (!/data:image\/png|jpeg;base64,/.test(img[j].src)) {
              let box = img[j];
              let width = img[j].width;
              let height = img[j].height;
              var canvas = document.createElement("canvas");
              let ctx = canvas.getContext("2d");
              console.log(width, height, "width,height");
               canvas.width = width;
              canvas.height = height;
              var cimge = new Image();
              cimge.crossOrigin = "Anonymous";
              var url = img[j].src;

              cimge.onload = e => {
               ctx.drawImage(cimge, 0, 0, width, height);
                let base = canvas.toDataURL("image/png", 0.1);
                  const bytes = window.atob(base.split(',')[1]);
                const ab = new ArrayBuffer(bytes.length);
                const ia = new Uint8Array(ab);
                for (let i = 0; i < bytes.length; i++) {
                    console.log(bytes.charCodeAt(i), 'bytes.charCodeAt(i)')
                    ia[i] = bytes.charCodeAt(i);
                }
                 var blob = new Blob([ab], { type: 'image/png' });
                let img = document.createElement("img");
                img.src = URL.createObjectURL(blob);
                  box.parentNode.replaceChild(img, box);
                this.htmlcanvas();
              };
              cimge.src = url;
            }
          }
        }
      });
    },

方式二

  shareImage() {
      this.$nextTick(() => {
        let img = document.querySelectorAll("img");
        if (img) {
          for (var j = 0; j < img.length; j++) {
           // console.log(img[j].src, "img");
            if (!/data:image\/png|jpeg;base64,/.test(img[j].src)) {
              let box = img[j];
              let width = img[j].width;
              let height = img[j].height;
              var canvas = document.createElement("canvas");
              let ctx = canvas.getContext("2d");
              console.log(width, height, "width,height");
               canvas.width = width;
              canvas.height = height;
              var cimge = new Image();
              cimge.crossOrigin = "Anonymous";
              var url = img[j].src;

              cimge.onload = e => {
               ctx.drawImage(cimge, 0, 0, width, height);
                let base = canvas.toDataURL("image/png", 0.1);
                 var MyComponent = Vue.extend({
                  // template: `<img src="${base}" />`
                  template: `<img :src="bade" />`
                  data(){
                  return {
                     bade:base
                     }
                  }  
                });
                var component = new MyComponent().$mount();
                box.parentNode.replaceChild(component.$el, box);
                this.htmlcanvas();
              };
              cimge.src = url;
            }
          }
        }
      });
    },
     htmlcanvas() {
      this.$nextTick(() => {
        html2canvas(this.$refs.imageWrapper, {
          width: this.$refs.imageWrapper.offsetWidth,
          height: this.$refs.imageWrapper.offsetHeight,
          scale: 0.5
        }).then(canvas => {
        console.log(canvas, "canvas");
          let url = canvas.toDataURL("image/png", 0.1);
          console.log(url, "url");
          // let downloadName = this.detailData.basic.act_name + '.png'
          // this.downloadFile(downloadName, url)
        });
      });
    }

参考:https://segmentfault.com/q/1010000018678384

web修理工
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS中的Blob对象
qq_39073792的博客
03-15 2026
什么是Blob Blob是一种JavaScript对象类型。Blob对象存储着大量的二进制数据，我们所熟悉的file对象就是继承自Blob，并且size和type属性也是继承自Blob。 如何创建一个Blob对象 创建一个Blob对象需要传递两个参数，一个是数据序列，可以是任意格式的值，一个是包含两个属性的对象，{ type: MIME的类型, endings: 决定第一个参数的数据格式，可以取值...
a标签图片下载 预览 压缩 new Blob
web修理工
06-04 463
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Page Title</title> <meta name="viewport" content="width=device-width, initi
前端js实现字符串/图片/excel文件下载
weixin_33889665的博客
02-13 568
在web开发中，如果你想让用户下载或者导出一个文件，应该怎么做呢？传统的做法是在后端存储或者即时生成一个文件来提供下载功能，这样的优势是可以做权限控制、数据二次处理，但缺点是需要额外发起请求、增大服务端压力、下载速度慢。 但随着HTML5的标准发布，我们已经能够做到只前端来下载各种文件了。 后端响应式下载 在常规的HTTP应答中，Cont...
vue后台系统使用html2canvas截图功能的时候图片跨域不显示
最新发布
qq_36738092的博客
04-25 486
【代码】vue后台系统使用html2canvas截图功能的时候图片跨域不显示。
原生js使用new Blob()实现带格式导出excel
热门推荐
九段刀客的博客
12-04 1万+
导出效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table id="table" border="1"> ...
前端常用下载new Blob()type类型（.pdf，.png，.doc，.xls，.xlsx，.js，.mps，.gif，.docx，.jpeg）
Deardhf的博客
07-24 1010
前端常用下载new Blob()type类型（.pdf，.png，.doc，.xls，.xlsx，.js，.mps，.gif，.docx，.jpeg）
html2canvas生成图片案例
02-11
HTML2canvas是一个JavaScript库，它的主要功能是将HTML页面或者DOM元素转换为Canvas图像，进而可以进一步导出为JPEG、PNG或SVG等格式的图片。这个工具在网页开发中非常实用，尤其对于需要用户自定义生成图形或者截图...
基于vue的移动端图片裁剪压缩处理
08-11
在移动端应用开发中，图片处理是一项常见的需求，尤其是在社交媒体、电商或者个人相册类的应用中。Vue.js作为一款轻量级且功能强大的前端框架，提供了丰富的插件和库来支持图片裁剪和压缩处理。本篇文章将深入探讨...
VUE图片上传1+2.zip
03-03
可以使用`html2canvas`和`canvas-to-blob`库来实现前端图片处理。 8. **错误处理** 图片上传过程中可能会遇到各种错误，如网络问题、文件过大等。Vue的响应式系统使得我们能轻松地将错误信息绑定到视图，提供友好...
JS图片剪切压缩上传
06-26
总的来说，这个"JS图片剪切压缩上传"Demo涵盖了前端图片处理的多个重要方面，是学习和理解JavaScript图片处理技术的一个宝贵资源。通过实践这个Demo，开发者可以深入了解Canvas、FileReader、FormData等相关API的...
js图片上传并预览图片
06-24
在JavaScript中实现图片上传并预览功能是一项常见的前端任务，主要涉及到HTML5的File API、Canvas以及Ajax异步请求等技术。以下将详细介绍这个过程中的关键知识点。 1. **File API**：HTML5引入的File API允许我们...
js Blob对象
weixin_43294560的博客
12-22 7816
Blob Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。 为了更直观的感受 Blob 对象，我们先来使用 Blob 构造函数，创建一个 myBlob 对象，具体如下图所示： size 属性用于表示数据的大小（以字节为单位） type 是 MIME 类型的字符串。text/html、image/p
JS中的Blob 下载文件 图片资源
拒绝成猿的程序员
11-01 8684
在一般的Web开发中，很少会用到Blob，但Blob可以满足一些场景下的特殊需求。Blob，Binary Large Object的缩写，代表二进制类型的大对象。Blob的概念在一些数据库中有使用到，例如，MYSQL中的BLOB类型就表示二进制数据的容器。在Web中，Blob类型的对象表示不可变的类似文件对象的原始数据，通俗点说，就是Blob对象是二进制数据，但它是类似文件对象的二进制数据，因此...
JavaScript中Blob对象及示例
duansamve的博客
06-09 868
Blob(binary large object)是计算机界通用术语之一，表示二进制大对象。在JavaScript中，Blob通常表示二进制数据，不过，它们不一定非得是大量数据，Blob也可以表示一个小型文本文件的内容
js基础-Blob （结尾有惊喜！有惊喜！有惊喜！）★★
front_end_fan
09-22 858
Blob2、BlobBlob（Binary Large Object）对象代表了一段二进制数据，提供了一系列操作接口。（以二进制形式保存的较大的对象）比如通过new Blob()创建的对象就是Blob对象.又比如,在XMLHttpRequest里,如果指定responseType为blob,那么得到的返回值也是一个blob对象.2.1 生成Blob对象生成Blob对象有两种方法：一种是使用Blob构
JS操作二进制方法 - blob
weixin_34007906的博客
04-08 5216
主要总结Blob对象属性及作用，通过DEMO介绍Blob对象的应用场景。 js可以通过blob方法直接操作二进制数据。 Blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 创建Blob var blob = new Blob( dataArr:...
blob 图片_Blob对象介绍
weixin_39706367的博客
11-22 803
一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据。Blob() 构造函数返回一个新的 Blob对象。 blob的内容由参数数组中给出的值的串联组成。语法var 参数array 是一个由ArrayBuffer, ArrayBufferView, Blo...
JS中的File（一）：Blob对象详解
weixin_57208584的博客
01-12 4268
Blob是一个装着二进制数据的容器对象。Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成来用于数据操作。
【前端】Vue之使用new Blob() 实现不同类型的文件下载
m0_64210833的博客
04-17 5433
前端实现下载不同类型的文件，内含详细代码进行测试。
vue跨域下载图片并改名
05-20
在 Vue 中，我们可以通过配置代理来解决跨域问题，然后使用 `axios` 库来下载图片。具体操作如下： 1. 在 `vue.config.js` 文件中配置代理 ```js module.exports = { devServer: { proxy: { '/api': { target:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web修理工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值