canvas对象转换成base64，前后获取的图片不一致

Question

使用sign-canvas实现手写签名的功能，自定义win取到sign-canvas所有值

后台也成功取到了手写签名的图像

不过在使用toDataURL方法后，转化成的base64图片却只有背景没有手写值，然后在f12中的应用程序和网络中找到两张图片，一张是较大的具有手写值图像

另外张是无手写值的图像

签名手写面板如下

对比图片值后发现，在sign-canvas是取到了具有手写值的图像，只是在toDataURL后才出现手写值消失的问题。

网上查询后尝试一些的方法
1.测试过调用setTimeout方法使绘制时间拉长，问题未解决
2.跨域问题，不太清楚区域是否影响，不过加上了setAttribute("crossOrigin", "anonymous"); ，问题未解决
3.css覆盖问题，尝试了单独取消sign-canvas的属性，未调试整体css框架，问题未解决
4.浏览器兼容，尝试Microsoft Edge和火狐网站，都有提示不兼容，未尝试更多条件

请问下该问题该如何解决，是toDataURL方法的问题吗

Answer 1

根据你的描述,这个问题很可能是由于跨域导致的。
当 Canvas 使用到了跨域的图像资源时,由于浏览器的同源策略,Canvas 不能直接读取这些资源。这会导致 toDataURL() 方法无法正确获取 Canvas 的图像数据,最终导致返回的 Base64 编码图像丢失了手写内容。
要解决这个问题,有以下几种方法:

1. 开启 Canvas 的跨域支持。你可以在 Canvas 元素上添加 crossOrigin 属性:
   html
   <canvas id="myCanvas"></canvas>
   设置 crossOrigin="anonymous" 可以解决大多数跨域问题。
2. 在服务器端设置 CORS 头。如果跨域资源在你控制的服务器上,你可以在服务端添加 CORS 头来解决跨域问题。
3. 将跨域资源 Proxy 到当前域下。你可以在服务端创建一个 Proxy,将跨域资源 Proxy 到当前域名下,这样就避免了跨域问题。
4. 将跨域资源下载到当前域下。如果跨域资源是静态资源,你可以直接下载到当前域名下使用,这样也可以避免跨域问题。
5. 如果跨域资源在用户控制下,可以使用 File API 让用户选择本地文件。因为 File API 不受同源策略限制,可以避开跨域问题。
   除此之外,你还可以检查下其他原因,比如 CSS 样式引起的遮挡,但根据你的描述,跨域问题的可能性最大。