canvas合成图片跨域相关问题

原文地址：https://segmentfault.com/a/1190000038457321
作者：Fw恶龙
本文首发于：思否

一、前言

前端在使用 canvas 合成图片时，如果涉及到跨域的资源会导致绘制失败，首先需要该资源所在的服务器配置允许跨域访问，其次在前端开发过程中还需要注意图片的使用方式，以下记录目前合成图片用到的几种方式在开发中需要注意的地方。

二、相关技术流程

*注：添加时间戳的原因是静态资源可能涉及到CDN，可能资源服务器允许跨域访问，但是该资源所走的CDN不支持跨域访问，添加时间戳以保证加载源站资源。

三、代码

*注：以下代码只提供相关细节，无法直接复制使用，需根据使用的框架自行编写相关代码

1. img 标签外链使用方式

<img id="bg" src="" crossorigin="anonymous">

document.getElementById('bg').src = yourImgSrc + '?time=' + new Date().valueOf()

2. js 动态创建 Image 对象

var bg = new Image()
bg.crossOrigin = 'anonymous'
bg.onload = function() {
    // onload to do something
}
bg.src = yourImgSrc + '?time=' + new Date().valueOf()

四、相关文档

• html2canvas官方API文档
• html2canvas 处理跨域图片的解决方案