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. 大数据之hadoop框架知识

    https://blog.csdn.net/zytbft/article/details/79285500

  2. python基础知识1

    1.何为json? json 是一种轻量级的数据交换格式,采用完全独立于编程语言的文本格式来存储和表示数据.简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言. 易于人阅读和编写,同时也易于机 ...

  3. LDD3 第10章 中断处理

    各种硬件和处理器打交道的周期不同,并且总是比处理器慢.必须有一种可以让设备在产生某个事件时通知处理器----中断. 中断仅仅是一个信号,如果硬件需要,就可以发送这个信号.Linux处理中断方式和用户空 ...

  4. cf 1263

    A #include<bits/stdc++.h> using namespace std; int main(){ int t;cin>>t; while(t--){ ]; ...

  5. Python基础教程（020）--集成开发环境IDE简介--Pycharm

    前言 学会掌握Pycharm工具 内容 集成了开发软件需要的所有工具 1,图形用户界面 2,代码编译器(支持代码补全,自动缩进) 3,编译器,解释器 4,调试器(断点,单步执行) Pycharm介绍 ...

  6. 【CF1100F】Ivan and Burgers（线性基，分治）

    题意:给定n个数,每个数为c[i],有q个询问,每次询问从第l个到第r个数字的最大xor和 n,q<=5e5,c[i]<=1e6,时限3s 思路:直接线段树维护区间线性基是3个log,会T ...

  7. BZOJ 2806: [Ctsc2012]Cheat(单调队列优化dp+后缀自动机)

    传送门 解题思路 肯定先要建出来广义后缀自动机.刚开始以为是个二分+贪心,写了一下结果\(20\)分.说一下正解,首先显然\(L_0\)具有单调性,是可以二分的.考虑二分后怎样判合法,对于分割序列很容 ...

  8. 20 October in ss

    Contest A: sum 快速读. B: 鬼谷子的钱袋(coin) 贪心. 按照类似二进制的方式准备钱袋:1, 2, 4, 8, ... 以此装入的钱袋数目记为 \(N\). 如果最后剩余不足以凑 ...

  9. （转）springboot应用启动原理(一) 将启动脚本嵌入jar

    转:https://segmentfault.com/a/1190000013489340 Spring Boot Takes an opinionated view of building prod ...

  10. 二次封装dojo slider

    上次的二次封装timeslider,挺有意思,又来封装一个dojo的,样式还是用arcgis的.实现更多功能,包括HorizontalSlider和VerticalSlider, 刻度的显示隐藏,标签 ...