使用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#多线程---Event类实现线程同步

    一.简介 我们使用类(.net Framework中的类,如 AutoResetEvent, Semaphore类等)的方法来实现线程同步的时候,其实内部是调用操作系统的内核对象来实现的线程同步. S ...

  2. 【springcloud】Zuul高级配置(zuul--2)

    转自:https://blog.csdn.net/pengjunlee/article/details/87162192 自定义路由规则 在<API Gateway 的路由和过滤(Zuul)&g ...

  3. Linux下用gdb 调试、查看代码堆栈

      Linux中用gdb 查看代码堆栈的信息 core dump 一般是在segmentation fault(段错误)的情况下产生的文件,需要通过ulimit来设置才会得到的. 调试的话输入: gd ...

  4. servlet中servletContext的五大作用（二）

    1.    获取web的上下文路径 2.    获取全局的参数 3.    作为域对象使用 4.    请求转发 5.    读取web项目的资源文件 package day10.about_serv ...

  5. ROS catkin_make error Could not find a package configuration file provided by "actionlib_msgs"

    在使用ROS catkin_make编译的时候,出现类似如下错误 CMake Error at /opt/ros/kinetic/share/catkin/cmake/catkinConfig.cma ...

  6. eclipse建立c语言工程以及成功下载到FPGA芯片过程遇到的各种问题以及解决方法详解

    推荐大家预先建立好一个工程目录文件夹,确实挺好用,参考正点原子的pdf教程,如下图所示, 我们eclipse在software文件夹建立一个workspace即可 选择用helloworld模板建立工 ...

  7. 性能测试工具JMeter 基础（六）—— 测试元件： 线程组

    线程组的定义: 线程组是测试计划执行的入口,所有的逻辑控制器和取样器都必须在线程组下,其他的元件根据位置的不同作用域是不同的. 线程组是每个线程都是独立运行测试脚本,一个线程组就等于一个用户,通过多个 ...

  8. Python+mirai开发QQ机器人起步教程（2021.9.9测试有效）

    参考:开发 mirai QQ机器人起步教程_叹之-CSDN博客_mirai python 本篇文章参考了以上博客,并对其中的失效内容和版本匹配问题进行了补充修改,实测能够成功运行.部分步骤的运行截图见 ...

  9. MySQL——企业SQL优化方案

    一.大表 (1)列多: 纵向拆分大表: create t1; insert into t1 select id, name from test; (2)行多: 根据数据存放特点和逻辑进行横向拆分大表: ...

  10. 安全测试工具（1）- Burp Suite Pro的安装教程

    啥是Burp Suite 用于攻击web 应用程序的集成平台 程序员必备技能,不仅可以拿来做渗透测试.漏洞挖掘还能帮助程序员调试程序 Bug 它包含了许多Burp工具,这些不同的burp工具通过协同工 ...