在使用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. leetcode网解题心得——61. 旋转链表

    目录 leetcode网解题心得--61. 旋转链表 1.题目描述 2.算法分析: 3.用自然语言描述该算法 4.java语言实现 5.C语言实现 leetcode网解题心得--61. 旋转链表 1. ...

  2. PhpStorm For Mac 安装使用及 Php 开发的 ‘Hello World’

    PHP全称为:Hypertext Preprocessor,中文名为:『超文本预处理 器』是一种通用开源脚本语言,主要用于Web应用开发(俗称做网站或 者做后台!) 编译软件:PHPStorm for ...

  3. nyoj 40

    题目:http://acm.nyist.edu.cn/JudgeOnline/status.php?pid=40 求最大公约数和最小公倍数... 思路:欧几里德算法求出最大公约数,即最大公约数 = g ...

  4. 关于MQTT连接的属性

    连接相关的属性. 这些属性是MQTT的连接报文中连接标志字, 包含一些用于指定 MQTT 连接行为的参数. 1.清理会话(Clean Session) 客户端和服务端可以保存会话状态,以支持跨网络连接 ...

  5. 【网摘】模仿 placeholder 属性

    /*为空时显示 element attribute content*/ .project-task-edit .subtask-body-txt:empty:before { content: att ...

  6. 知乎模拟登录，支持验证码和保存 Cookies

    import requests import time import re import base64 import hmac import hashlib import json import ma ...

  7. git合并分支到主干

    1.从当前分支切换主干 git checkout master 2.更新主干内容到本地 git pull 4.提交分支,并将分支merge到主干 git merge dev 5: i键后输入备注  输 ...

  8. Caffe2 的基本数据结构（Basics of Caffe2 - Workspaces, Operators, and Nets）[4]

    这篇文章主要介绍Caffe2的基本数据结构: Workspaces Operators Nets 在开始之前最好先阅读以下Intro Turorial 首先,导入caffe2.其中core和works ...

  9. 树 插件 ztree 的基本用法

    因业务需要 用到 ztree 插件 第一次用tree插件上手有点难度 官网 http://www.treejs.cn/v3/main.php#_zTreeInfo 第一步:初始化树,树的所有数据从后台 ...

  10. redis 之redis-sentinel主从复制高可用

    一.redis主从复制背景问题 Redis主从复制可将主节点数据同步给从节点,从节点此时有两个作用: (1)一旦主节点宕机,从节点作为主节点的备份可以随时顶上来. (2)扩展主节点的读能力,分担主节点 ...