共计 620 个字符，预计需要花费 2 分钟才能阅读完成。
原文地址：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 解决跨域图片的解决方案
正文完