使用html2canvas插件可以无法渲染图片的情况

在使用html2canvas的时候。如果元素中还包含网络图片。那么有很大的几率渲染不出来。即时把html2canvas的允许跨域打开也无济于事。这次就从根源解决这个问题。
而且即时渲染出来了。其实同一张图片已经请求了2次（初始渲染一次，html2canvas渲染也请求了一次）。

问题的根本：在插件中，图片请求的时候跨域了（甚至同域的图片都难请求）

 
图片多也会导致图片请求失败
把图片放在OSS（云存储）上，oss允许跨域，图片依然是无法生成

解决：在请求对应oss图片的后面，加一个参数，为时间戳，目的就是不使用oss的缓存，就可以解决跨域问题了，如：

https://test.oss.com/image?t=129094392478

解决思路：

1、在JS中使用 Image 对象。该对象可以设置跨域请求。

2、把图片请求回来后直接渲染到canvas上，注意这里是直接渲染到canvas。并不是通过html2canvas

3、把渲染图片的canvas转成base64的编码格式。

4、把转换好的图片格式重新放到html的元素中

5、使用html2canvas转换对应的html元素

前提条件：

服务器的图片，必须是已经设置了允许跨域的

如果服务器端的图片不允许跨域访问，那么只是前端是很难进行跨域图片处理，以下说的使用 img 标签特性也将无效

ps:html2canvas操作更像 发送一次请求完成拼图操作，请求图片地址时(当做api)，是用过浏览器域名地址访问，需要设置跨域请求：

No 'Access-Control-Allow-Origin' header is present on the requested resource

OSS 完成，接下来看下代码：

     
<body>

  <!-- 需要转换的html结构 -->

  <div id="test-box">

    <!-- 这里不需要把图片路径放入src了。直接通过data存储就行 -->

    <img id="img1" src=""

      data-imgUrl="http://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg">

  </div>

  <script src="../../js/lib/jquery-2.1.4.min.js"></script>

  <script src="../../js/lib/html2canvas.js"></script>

  <script>

    $(function () {

      //var url = $("#img1").attr('data-imgUrl');

       var url = "http://img.test.看截图.com/img/2020/5/23/aad618896c3aad9405f975d0f1b9ef3a.JPG"

      var canvas = document.createElement('canvas'),

        ctx = canvas.getContext('2d'),

        img = new Image();

      img.crossOrigin = 'Anonymous'; // 重点！设置image对象可跨域请求

      img.src = url + "?timeStamp=" + new Date().getTime(); //解决缓存引起访问失败需要添加时间戳。。。。。问题的关键点

      img.onload = function () {

        canvas.height = img.height;

        canvas.width = img.width;

        ctx.drawImage(img, 0, 0);

        var dataURL = canvas.toDataURL('image/jpeg');

        console.log(dataURL)

        $("#img1").attr("src", dataURL)

        // // 赋值完成，生成图片

        // html2canvas($('#test-box'), {

        //   useCORS: true,

        //   allowTaint: true

        // }).then(function (canvas) {

        //   console.log(canvas) // 生成的canvas对象

        //   var  resImgUrl = canvas.toDataURL(); // 最后拿到了对应节点生成的图片（base64格式）

        //   alert(resImgUrl)

        // })

      };

    })

  </script>

</body>

// 这个控制台 ，有个红框 代表任何域都可以访问次图片；出现这个说明网络图片，，在html2canvas中能使用！！!

根据上边代码：远程图片地址，是可以达到截图渲染的，，，，图片跨域设置！！！， canvas-->base64-->dom

需要注意的就是调用的循序。示例代码中是进入页面后直接开始这些步骤了。而且必须先请求图片在使用html2canvas插件

html2canvas 图片合成模糊问题解决

要是通过把canvas容器扩大，再将和成的图片进行缩放

getCanvasImg(obj){

            var doc = window.document;

            var width = obj.content.offsetWidth;

            var height = obj.content.offsetHeight;

            var canvas = document.createElement("canvas");

            var context = canvas.getContext("2d");

            var scale = 2; 

            canvas.width = width * scale;

            canvas.height = height * scale;

            canvas.getContext("2d").scale(scale, scale); 

            var opts = {

                scale: scale,

                canvas: canvas,

                logging: true,

                width: width,

                height: height

            };

            html2canvas(obj.content, opts).then(function (canvas) {

                var dataUrl = canvas.toDataURL();

                var newImg = doc.createElement("img");

                newImg.src =  dataUrl;

                newImg.id =  "qcImg";

                //newImg.style.width = "100%";

                newImg.style.width = canvas.width/2 + 'px';

                newImg.style.height = canvas.height/2 + 'px';

                newImg.style.borderRadius = '10px';

                newImg.style.webkitBorderRadius = '10px';

                obj.box.removeChild(obj.content);

                obj.box.appendChild(newImg);

                obj.cb&&obj.cb();

            });

        }

总结：合成区域如果有涉及到图片的，不要用背景处理，统统用img标签来引入，然后img一定要用个外框（div或者其他标签）包裹住，这样就可以很好的解决图片模糊问题了。

可以参考：

https://blog.csdn.net/Jioho_chen/article/details/83239288

https://blog.csdn.net/qq_37028216/article/details/80996939?utm_medium=distribute.wap_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase&depth_1-utm_source=distribute.wap_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase

https://blog.csdn.net/yemuxia_sinian/article/details/80745102

html2canvas 无法渲染网络图片及本地 解决方案的更多相关文章

  1. Ruby1.9.3-下载网络图片至本地，并按编号保存。

    #本程序功能:下载网络图片至本地,并按编号保存. #使用Ruby1.9.3在winxp_sp3下编写. require 'nokogiri' require 'open-uri' #以下 根据网址解析 ...

  2. 2019-9-2-win10-uwp-存放网络图片到本地

    title author date CreateTime categories win10 uwp 存放网络图片到本地 lindexi 2019-09-02 12:57:38 +0800 2018-2 ...

  3. win10 uwp 存放网络图片到本地

    有时候我们的网络很垃圾,我的的UWP要在第一次打开网络图片,就把图片存放到本地,下次可以从本地打开. 有时候用户使用的是流量网络,不能每次都联网下载. 我们不得在应用存放用户打开的图片. 这就是先把图 ...

  4. .Net 使用爬虫下载网络图片到本地磁盘

    准备: 1.新建控制台项目 2.引用System.Drawing类库 3.安装HtmlAgilityPack 1.5.2.0 4.如果不会XPath语法的话,建议简单看下 代码: static voi ...

  5. [转]kindeditor隐藏上传图片框网络图片或本地上传的功能

    原文地址:http://www.lingchenliang.com/post/154.html kindeditor富文本编辑器点击上传图片按钮,在弹出的窗口中去掉上传网络图片的功能,只留下本地上传, ...

  6. SharePoint Framework 在Visual Studio Code中调试你的本地解决方案

    博客地址:http://blog.csdn.net/FoxDave Visual Studio Code不知道大家都有没有,界面清爽,编辑快速,是一个非常好的前端开发工具.本文介绍如何使用Goog ...

  7. 微信图片生成插件，页面截图插件 html2canvas，截图失真 问题的解决方案

    html2canvas 是一个相当不错的 JavaScript 类库,它使用了 html5 和 css3 的一些新功能特性,实现了在客户端对网页进行截图的功能.html2canvas 通过获取页面的 ...

  8. React 服务端渲染方案完美的解决方案

    最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法.在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权衡,你会选择哪一种服务端渲染方式呢? 什么是服务 ...

  9. 鸿蒙OS前端开发入门指南：网络图片_Image渲染网络图片

    目录: 1.开启明文传输 2.权限申请 3.引入http插件 4.案例展示 5.<鸿蒙OS前端开发入门指南>文章合集 开启明文传输 在config.json配置文件添加如下配置(如果不开启 ...

随机推荐

  1. C++程序调试方式总结

    bug调试要根据应用场景和条件,选择什么样子的调试方式很大程度上不是你想选择什么样的调试方式,而是还剩下什么样子的调试方式可用.下面就根据不同的场景和条件来总结一下. 目录: 1.gdb调试或者IDE ...

  2. Mybatis的分页工具

    配置拦截器插件 特别注意,新版拦截器是 com.github.pagehelper.PageInterceptor. com.github.pagehelper.PageHelper 现在是一个特殊的 ...

  3. ORB_SLAM2 Tracking流程

  4. 用C++实现的Eratosthenes筛法程序

    运行示例 只输出素数总数的运行示例 PS H:\Read\num\x64\Release> .\esieve.exe Eratosthenes sieve: a method to find o ...

  5. centos7 postgresql安装配置

    2021-07-15 1.添加用户 # 添加用户 postgres useradd postgres # 给用户 postgres 设置密码 passwd postgres 2.切换到该用户,下载 p ...

  6. centos7 wget安装jdk

    2021-07-151. 环境介绍 操作系统:centos7 jdk版本:jdk1.8.0.211 2. 下载 进入 https://www.oracle.com/java/technologies/ ...

  7. [考试总结]noip模拟45

    真开心,挂没了.. 考完:"你们怎么第二题打了这么点分,明明一个爆搜就有65pts!!!怎么跟别人打?!" 然后我看了看我的爆搜,30pts. 然后认为自己打爆了... 我又想为什 ...

  8. Linux 学习路线

    前言 这篇文章会一直更新...只是将个人的文章总结归纳到这,不代表最佳学习路线 没有链接的文章后续会补上...还没写的知识点未来用到也会补上...太卷了 常用基础命令 Linux常用命令 - cd命令 ...

  9. Redis-初见

    目录 启动and连接 JRedis 宝塔 Redis.conf RDB AOF(Append Only File) 发布和订阅 主从复制 一主二从 复制原理 宕机后的手动配置主机 哨兵模式 Redis ...

  10. String与基本类型，字符数组，字节数组的转换

    String与基本数据类型 * 基本数据 --->字符串(String) * 1.基本数据类型值 +"" --->最简单 * 2.使用包装类中的toString(参数类 ...