使用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. itoa函数递归实现

    库函数中有atoi函数,用意是将字符形式输入的数据转换成数字,而库函数有没有提供一个将数字转换成字符的函数呢?答案是有的,而且功能很是强大,那就是sprintf().snprintf()格式化转换函数 ...

  2. 【转载】vim 中文帮助手册的安装

    本文出处http://hi.baidu.com/bkhcvzdvmjfkpyr/item/9c238224c1a69498b6326360 vim自带的帮助手册是英文的, 对平时编程的人来说没有多大阅 ...

  3. docker容器 如何精简镜像减小体积

    写在前面 我们在上篇<Docker容器 关于镜像构建的安全问题>一起学习了如何构建一个基于安全的镜像,这篇小作文我们会学习镜像构建的另一个关键性问题,为何别人打造的镜像只有10MB而我的有 ...

  4. SpringBoot笔记（4）

    一.请求处理 1.1 常用参数注解使用 注解 使用 @PathVariable 获取URI模板指定请求,并赋值到变量中,不指定可以将所有请求放到map中,但是健值都为String @RequestHe ...

  5. MySQL基础2——常用命令

    注意:MySQL在centos中安装的是5.7版本的,编辑MySQL时会有个报错,需要执行: set @@global.sql_mode='STRICT_TRANS_TABLES,NO_ZERO_IN ...

  6. 学习笔记之IdentityServer4（一）

    快速入门IdentityServer4 概述 将 IdentityServer 添加到 ASP.NET Core 应用程序 配置 IdentityServer 为各种客户发行代币 保护 Web 应用程 ...

  7. CentOS7系统搭建FTP服务器

    创建FTP服务器1.安装FTP服务 yum install -y vsftpd 默认的FTP服务的配置文件路径为/etc/vsftpd cd /etc/vsftpd[root@test924 vsft ...

  8. Python - 文件模式a+读取不了文件

    代码 f = open('test/gbk.txt', 'a+', encoding='utf-8') print(f.readline()) 最终的执行结果是输出空,为什么呢? a+模式打开文件指针 ...

  9. JVM-调优-命令

    目录 jps 命令格式 option参数 示例 jstat 命令格式 参数 option 参数总览 option 参数详解 -class -compiler -gc -gccapacity -gcut ...

  10. Maven项目之间关系介绍

    Maven项目之间的关系 依赖关系 单纯的项目A中需要项目B中的资源,将项目B打成Jar包被A依赖,此时项目A直接调用项目B中资源即可. 项目A和项目B此时形成最基本的依赖关系. 继承关系 需要场景: ...