在使用html2canvas截取页面的时候发现图片死活保存不到本地，chrome一直报“网络错误”，

主要出现这个问题是canvas保存图片到本地时各个浏览器像素的限制不同，

所以将图片数据转换成Blob数据流下载下来就行了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type:mime});
      },
      downloadCanvas(){
        var link = document.createElement("a");
        var imgData =canvas.toDataURL({format: 'png', multiplier: 4});
        var strDataURI = imgData.substr(22, imgData.length);
        var blob = this.dataURLtoBlob(imgData);
        var objurl = URL.createObjectURL(blob);
 
        link.download = this.cName+".png";
 
        link.href = objurl;
 
        link.click();
      }.

浏览器 canvas下载图片 网络错误的更多相关文章

  1. canvas下载图片

    canvas下载图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. chrome下载提示网络错误

    问题背景:项目开发测试阶段出现该问题. 复现:开发调试过程中一直没有问题,本地下载excel.Word.pdf 都完美,但是在服务部署到服务器之后,测试环境的chrome就总是下载失败,提示网络错误. ...

  3. .net 已知图片的网络路径，通过浏览器下载图片

    没什么技术含量,主要留给自己查找方便: 如题,知道图片的完整网络路径的情况下,在浏览器中下载图片的实现: 下面这个方法实现的是把图片读取为byte数组: private byte[] GetImage ...

  4. java假设模拟请求重新启动路由器(网络爬虫经常使用)，还有java怎样下载图片

    我们假设在公司或家里使用网络爬虫去抓取自己索要的一些数据的时候,经常对方的站点有defence机制,会给你的http请求返回500错误,仅仅要是同样IP就请求不到数据,这时候我们仅仅能去重新启动路由器 ...

  5. 手把手教你写基于C++ Winsock的图片下载的网络爬虫

    手把手教你写基于C++ Winsock的图片下载的网络爬虫 先来说一下主要的技术点: 1. 输入起始网址,使用ssacnf函数解析出主机号和路径(仅处理http协议网址) 2. 使用socket套接字 ...

  6. 解决 canvas 下载含图片的画布时的报错

    Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may no ...

  7. Android开发之java代码工具类。判断当前网络是否连接并请求下载图片

    package cc.jiusan.www.utils; import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; ...

  8. 网络请求以及网络请求下载图片的工具类 android开发java工具类

    package cc.jiusan.www.utils; import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; ...

  9. SCRIPT7002: XMLHttpRequest: 网络错误 0x2ef3, 由于出现错误 00002ef3 而导致此项操作无法完成,浏览器中的Keep-Alive

    http://www.cnblogs.com/OpenCoder/p/5089258.html     IE中Keep-Alive机制引起的错误 我们知道Http协议是基于TCP/IP连接的,也就是说 ...

随机推荐

  1. Windows下MySQL5.7版本中修改编码为utf-8

    我们新安装的MySQL数据库默认的字符是 latin1 ,所以每次新建数据库都要修改字符,非常麻烦.所以我们必须将它改成UTF8字符的. 修改方法如下: 一.修改MySQL的my.ini 首先在 \P ...

  2. Redis 简易消息队列

    为了保持程序的高效,建议使用ProtoBuf. Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语言数据标准,目前已经正在使用的有超过 48, ...

  3. laravel nginx下 css 和js 加载 重写规则

    server { listen 80; server_name test.hanwen.com; #charset koi8-r; #access_log logs/host.access.log m ...

  4. 解Bug之路-记一次调用外网服务概率性失败问题的排查

    前言 和外部联调一直是令人困扰的问题,尤其是一些基础环境配置导致的问题.笔者在一次偶然情况下解决了一个调用外网服务概率性失败的问题.在此将排查过程发出来,希望读者遇到此问题的时候,能够知道如何入手. ...

  5. 泛型和Object的区别？

    泛型声明 public <T> T doSomeThing(T t){ return t; } Object声明 public Object doSomeThing(Object obj) ...

  6. PTA的Python练习题（五）

    昨天耽搁了一天,今天继续 从  第3章-5 字符转换 开始 1. a=input() b="" for i in a: ': b=b+iprint(int(b))#(写成b=i+b ...

  7. Eclipse上将maven项目部署到tomcat,本地tomcat下，webapps下，web-inf下lib下没有jar包决绝方案

    右键项目选择properties  ,选择Deployment Assembly  , 右边点击Add 然后选择  Java Build Path Entries ,,,next  ,  选择Mave ...

  8. 从零构建以太坊（Ethereum）智能合约到项目实战——第25章 Embark FrameWork

    P109 .1-Embark Framework 开发入门篇P110 .2-Embark Framework 去中心化存储 (IPFS)

  9. python学习 —— seaborn、matplotlib、pandas、numpy package的混合使用

    这里使用了Titanic Machine learning数据集,然后通过Seaborn的函数来拟合和绘制回归线,matplotlib进行可视化. 先来一个简单的测试: import pandas a ...

  10. Python学习 —— 实现简单的爬虫

    为了加快学习python3.x,查了许多资料后写了这个脚本,这个脚本主要是爬取百度图片'东方幻想乡'的图片,但还是有很多问题存在. 下面给出代码: # 更新了一下代码 from urllib impo ...