在使用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. js一位大侠的笔记--转载

    js基础 js笔记散记,只是为了方便自己以后可以回看用的: 1.所有用 “点” 的都能 “[]” 代替 odiv.style.color odiv['style'].color odiv['style ...

  2. Python学习第二十七课——写一个和Django框架的自己的框架

    MyWeb框架: from wsgiref.simple_server import make_server def application(environ, start_response): pri ...

  3. 刚开始用springboot踩的好多坑！！！

    今天,刚开始就在刚才我留下了激动的泪水,因为我捯饬springboot已经有几天了,我通过看视频学的,但是坑实在是太多了,今年是鼠年~~~LOL----瘟疫之源来了, 被困在了老家不能走,老家网实在是 ...

  4. php环境一键升级脚本

    因为要解析PHP页面需要配置相应的PHP环境,而系统本身的php版本又大多不合适.网上那种一键lamp和lnmp的脚本很多,但是这样一来自己能够定制的空间则少了.所以我自己编写了个门用于安装php环境 ...

  5. 修改html内联样式的方法

    问题:如下图弹出页面操作不了 分析:审查元素,发现是内联元素样式z-index:19891015导致的,修改内联元素样式z-index:0发现可以操作了 解决方法:内联样式优先级高,再引入css覆盖样 ...

  6. 单元测试及框架简介 --junit、jmock、mockito、powermock的简单使用

    转 单元测试及框架简介 --junit.jmock.mockito.powermock的简单使用 2013年08月28日 14:33:06 luvinahlc 阅读数:6413 标签: 测试工具单元测 ...

  7. Chrome浏览器 HTML5看视频卡顿

    定位问题 起初以为是flash的问题,但是在B站看视频,由html播放改为flash播放后,卡顿现象消失 将相同的B站视频,用edge播放,也无卡顿现象 可以确定,问题出在chrome身上 解决方法 ...

  8. 开发中，GA、Beta、GA、Trial到底是什么含义

    前言 用过maven的都应该知道,创建maven项目时,其版本号默认会以SNAPSHOT结尾,如下: 通过英文很容易就可以知道这是一个快照版本.但是,在开发中,或者使用别的软件的时候,我们常常会见到各 ...

  9. JS闭包（1）

    1.首先看一段代码: var a = 1; function fn1(){ var b = 2; function fn2(){ console.log(a); console.log(b); } } ...

  10. 吴裕雄--天生自然ORACLE数据库学习笔记：Oracle系统调优

    --修改 alter system set large_pool_size=64m; --显示 show parameter large_pool_size; select sum(getmisses ...