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. 苹果正制造一款疯狂的“16K”VR耳机，效果到底有多牛？

    苹果一直以来都有传闻称正在研发一副增强现实眼镜,但今天的一份报告显示,他们希望在虚拟现实领域与Google,微软和Facebook竞争. 据CNET报道,苹果公司着眼于2020年发布的将AR和VR技术 ...

  2. 向指定URL 发送POST请求的方法

    java发送psot请求: package com.tea.web.admin; import java.io.BufferedReader; import java.io.IOException; ...

  3. nyoj 471:好多的树（容斥原理）

    题目链接: http://acm.nyist.net/JudgeOnline/problem.php?pid=471 还是直接上代码.. #include<bits/stdc++.h> u ...

  4. c++ ofstream使用方法

    ofstream是从内存到硬盘,ifstream是从硬盘到内存,流缓冲即是内存空间. 插入器<<  : 向流输出数据. cout << "test!" &l ...

  5. 【优化】Mysql字段尽可能用NOT NULL

    下面咱们要聊的是 MySQL 里的 null,在大量的 MySQL 优化文章和书籍里都提到了字段尽可能用NOT NULL,而不是NULL,除非特殊情况.但却都只给结论不说明原因,犹如鸡汤不给勺子一样, ...

  6. c#消息窗体

    C#模拟弹出窗体系统菜单介绍 using System.Runtime.InteropServices; ; ; ; ; ; ; const uint TPM_VCENTERALIGN = 0x10; ...

  7. 后端技术杂谈3：Lucene基础原理与实践

    本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...

  8. ssd存储的SLC、MLC、TLC闪存芯片颗粒有什么区别？

    SLC = Single-Level Cell ,即1bit/cell,速度快寿命长,价格贵(约MLC 3倍以上的价格),约10万次擦写寿命: MLC = Multi-Level Cell,即2bit ...

  9. 解决“/bin/bash^M: bad interpreter: No such file or directory”

    在执行shell脚本时提示这样的错误主要是由于shell脚本文件是dos格式,即每一行结尾以\r\n来标识,而unix格式的文件行尾则以\n来标识.  查看脚本文件是dos格式还是unix格式的几种办 ...

  10. python3+django2 个人简单博客实现 -正在施工