html2canvas绘制跨域图片之后，会导致画布被污染，从而无法使用canvas的toDateUrl()等方法获取图片数据的方法，这是canvas的限制而并非html2canvas的原因。好了锅甩好了下面进入正题

公司最近有一个需求，保存一张海报，但是卡在了将绘制后图片转化成base64的个砍上。查了下原因，就是因为绘制了跨域图片，从而导致画布无法导出成数据。行吧既然是跨域，那么就和后台说一下，把特定的图片的Access-Control-Allow-Origin设置成*吧，但是改完之后的结果却又不尽人意

在chrome上确实可以导出了，但是在safari上虽然没有爆出画布污染，能导出了，但是跨域图片在绘制后是一片空白。这就有点无奈了。

最后只能使用

将图片转化成base64之后，再使用html2canvas绘制，这样虽然解决了画布污染，和绘制空白的问题，当是后台那边的开销就有点奢侈了，不知到那位大神有没有更好的解决方案。

最后在加一句。开发h5app的同学，再ios上使用html2canvas绘制本地图片（img src=”../../img1.png“）都会出现画布污染的情况

关于使用html2canvas 绘制图片的坑的更多相关文章

  1. 前端使用html2canvas截图，在canvas上绘制图片及保存图片

    1.使用html2canvas 存在的问题: 不同的机型绘制位置不同的问题. 这个主要因为Html动态设置了html的dpr.(dpr可以解决屏幕显示不了1pxborder和无法显示小于12px的文字 ...

  2. UWP&WP8.1 重新绘制图片 WriteableBitmap用法 图片转byte[]数组，byte[]数组转图片

    ---恢复内容开始--- WriteableBitmap 是UWP和WP8.1绘制图片的,重组图片的最重要方法.方法较为简单,方法多样性. 通过查看文档,WriteableBitmap的继承性是    ...

  3. html5 绘制图片 drawImage

    要在绘图上下文中绘制图片,可以使用 drawImage 方法.该方法有三种不同的参数: drawImage(image,dx,dy) drawImage(image,dx,dy,dw,dh) d ...

  4. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  5. Android Canvas使用drawBitmap绘制图片

    1.基本的绘制图片方法 //Bitmap:图片对象,left:偏移左边的位置,top: 偏移顶部的位置 drawBitmap(Bitmap bitmap, float left, float top, ...

  6. android中Canvas使用drawBitmap绘制图片

    1.主要的绘制图片方法 //Bitmap:图片对象,left:偏移左边的位置,top: 偏移顶部的位置     drawBitmap(Bitmap bitmap, float left, float ...

  7. Direct2D WIC绘制图片

    绘制图片需要用到WIC,WIC的功能包括: 编解码图片.也可以自定义图片解码插件. 读取图片元数据. 图像处理(最高支持每通道32位). 内置支持一些流行的格式.包括:BMP v5, GIF 89a/ ...

  8. lufylegend库 LGraphics绘制图片

    lufylegend库 LGraphics绘制图片 <!DOCTYPE html> <html lang="en"> <head> <me ...

  9. MATLAB坐标系中绘制图片

    MATLAB坐标系中绘制图片 方法一 使用图片坐标循环的方式,代码如下. clear,clc,close all tic; map=imbinarize(imread('map.bmp'));%map ...

随机推荐

  1. ubuntu tar.gz 包 php7.2 安装

    一 官网: https://www.php.net/downloads.php https://blog.izgq.net/archives/910/ https://www.jianshu.com/ ...

  2. centos 6.5 安装 ant

    从ant官方网站下载ant安装包:apache-ant-1.9.7-bin.tar.gz,解压 tar xvf apache-ant-1.9.7-bin.tar.gz -C /usr/java/ 配置 ...

  3. 如何用命令行启动android的模拟器(简要描述)

    参考来源 http://blog.sina.com.cn/s/blog_5033827f0101cxhz.html 环境前置条件: 已安装JDK,已下载并安装了SDK 1.查看已安装的SDK平台:an ...

  4. boost array

    boost::array is similar to std::array, which was added to the standard library with C++11. With boos ...

  5. Python函数中*args和**kwargs来传递变长参数的用法

    参考自: http://www.jb51.net/article/78705.htm 单星号形式(*args)用来传递非命名键可变参数列表.双星号形式(**kwargs)用来传递键值可变参数列表. 1 ...

  6. PCB学习

    一.PCB设置 在线DRC:自动更正,会提示短路. 对象捕捉>>智能元件snap,可以智能抓取中心点,勾选 智能TrackEnds: 撤销重做:30步 旋转步骤:90.000(可以按空格旋 ...

  7. CF 778D Parquet Re-laying——构造

    题目:http://codeforces.com/problemset/problem/778/D 完全没思路……就看了题解. 很好地思路是考虑操作可逆,所以起始状态和最终状态都变到一个中转状态,即都 ...

  8. [CSP-S模拟测试]:异或（树状数组+LCA）

    题目传送门(内部题21) 输入格式 第一行一个字符串$str$,表示数据类型.第二行一个正整数$k$,表示集合$K$的大小,保证$k>1$.接下来$k$行每行$k$个数,第$i$行第$j$个数表 ...

  9. [CSP-S模拟测试]:壕游戏（费用流）

    题目传送门(内部题18) 输入格式 第一行包括四个数$n,m,k,s$表示有$n$个剧情点,$m$个关卡,要玩$k$次游戏,$s$个完结点接下来一行包含$s$个数,代表$s$个完结点的编号.接下来$m ...

  10. [CSP-S模拟测试]:山洞（DP+快速幂）

    题目传送门(内部题17) 输入格式 一行两个整数$n$,$m$,含义如题面. 输出格式 一行一个整数,表示方案数模$1e9+7$. 样例 样例输入1: 4 6 样例输出1: 样例输入2: 707 18 ...