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. [BZOJ5305] [HAOI2018] 苹果树 数学 组合计数

    Summary 题意很清楚: 小 \(C\) 在自己家的花园里种了一棵苹果树, 树上每个结点都有恰好两个分支. 经过细心的观察, 小 \(C\) 发现每一天这棵树都会生长出一个新的结点. 第一天的时候 ...

  2. [Luogu1821][USACO07FEB]银牛派对Silver Cow Party

    由题意可知,我们需要求的是很多个点到同一个店的最短距离,然后再求同一个点到很多个点的最短距离. 对于后者我们很好解决,就是很经典的单源最短路径,跑一边dijkstra或者SPFA即可. 然而对于前者, ...

  3. java基础复习（二）

    一. 基本语法 如果一个源文件中什么内容都没有,编译会不会生成 字节码文件?不会 如果一个类中没有主方法(如下图),编译运行会怎么样?编译可以通过,但运行报错 : 没有主方法 主方法 : 是一个特殊的 ...

  4. network ---边赋予权重

    有向图和无向图都可以给边赋予权重,用到的方法是add_weighted_edges_from,它接受1个或多个三元组[u,v,w]作为参数,其中u是起点,v是终点,w是权重.例如: G.add_wei ...

  5. HTTP协议缓存

    缓存的概念 缓存这个东西真的是无处不在, 有浏览器端的缓存, 有服务器端的缓存,有代理服务器的缓存, 有ASP.NET页面缓存,对象缓存. 数据库也有缓存, 等等. http中具有缓存功能的是浏览器缓 ...

  6. vue-葵花宝典

    router-view 中包含 router-view 这种情况就可以 使用嵌套路由了 变化的视图中包含变化的视图 代码层面 router-view 中 包含router-view 路由childre ...

  7. 基于Socket和OpenCV的实时视频传输

    https://blog.csdn.net/pengz0807/article/details/52204475

  8. python类与对象练习题扑克牌

    #定义一个扑克类,属性是颜色,数字.#定义一个手类,属性是扑克牌得颜色数字#定义一个人类,属性是左手,右手.类里定义一些方法,比如交换,展示 class Poker : def __init__(se ...

  9. lerna----一个强大的专注组件库的管理工具

    最近在看关于lerna的资料,没有中文版api.简书上有一篇文章半英半汉,可以撸来看看. http://www.jianshu.com/p/63ec67445b0f

  10. selenium快捷键操作

    常用的键盘操作 send_keys(Keys.BACK_SPACE) 删除键(BackSpace) send_keys(Keys.SPACE) 空格键(Space) send_keys(Keys.TA ...