zoukankan      html  css  js  c++  java
  • 关于使用html2canvas 绘制图片的坑

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

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

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

     最后只能使用

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

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

  • 相关阅读:
    洛谷 P2327 [SCOI2005]扫雷 题解
    P1388 算式 题解
    P1281 书的复制 题解
    P2896 [USACO08FEB]一起吃饭Eating Together 题解
    P1140 相似基因 题解
    变量的解构赋值
    let 和 const 命令
    第一阶段站立会议8
    第一阶段站立会议7
    第一阶段站立会议6
  • 原文地址:https://www.cnblogs.com/wrhbk/p/12090452.html
Copyright © 2011-2022 走看看