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. ajax处理返回的三种格式（json格式 , xml通用格式 , html文本格式）（数据类型：整数、字符串、数组、对象）（基础最重要！）

    ajax方法的参数 常用的ajax参数比如url,data,type,包括预期返回类型dataType,发送到服务器的数据的编码类型contentType,成功方法,失败方法,完成方法.除了这些以外还 ...

  2. find命令进阶用法（一）

    -cmin n: 查找 exactly n 分钟前内容或属性被最后修过的文件 -cnewer file: 查找内容或属性的最后修改时间晚于file文件的文件 -ctime n: 查找 **n*24** ...

  3. MySQL使用版本号实现乐观锁

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11608581.html 乐观锁适用于读多写少的应用场景  乐观锁Version图示 Project D ...

  4. excel VBA 编程

    Dim cuttent_columns As Integer Dim care_repeat As Integer Private Sub Workbook_Open() Dim i As Integ ...

  5. Delphi fmx 找不到android设备解决办法

    刚接触到移动开发,很多不熟悉.配置好Android SDK后,​​如果​用模拟器来调试程序的话,那速度会让人崩溃,我用的Nexus7平板​​,插上电脑,开启USB调试,但奇怪在Delphi里就是找不到 ...

  6. centos查看磁盘空间大小

    查看磁盘空间大小 df -h 查看当前文件夹所有文件大小 du -sh 查看指定文件夹大小 du -h /data 查看指定文件夹下所有文件的大小 du -h /data/ 查看指定文件大小 du - ...

  7. CreateProcessEx创建进程

    NTSYSCALLAPI NTSTATUS NTAPI NtCreateProcess( OUT PHANDLE ProcessHandle, IN ACCESS_MASK DesiredAccess ...

  8. 前端模块化开发的价值(seaJs)

    随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做 ...

  9. 怎么学习PHP

    学习PHP有半个月了.每天都要打代码and写笔记.学过C和Java,在学习PHP的过程中比较顺利吧 (^-^) 代码打得越多,运行得越多,慢慢得会对程序理解得越深.下面就讲讲我学习PHP的心得.PHP ...

  10. Python的基本数据类型,用户交互

    整数: int 常见的数字都是int类型. 用于计算或者大小的比较 在32位机器上int的范围是: -2**31-2**31-1,即-2147483648-2147483647 在64位机器上int的 ...